小程式動態新增元件wx:for實現--小程式走過的坑(8)(最新版)
阿新 • • 發佈:2019-01-31
動態新增n個view元件
在小程式程式設計過程中,遇到一個問題,在使用者需要n個輸入框時。小程式無法直接通過js動態向頁面新增多個view元件。
於是我想到了用wx:for方法實現動態新增
先在小程式中定義一個只有一個引數的陣列。那在頁面上將會顯示一個input。當用戶點選時,只要向該陣列中推一個元素進去,由於小程式資料雙向繫結的原理。頁面就會for迴圈多一個input。在該input繫結相同事件,繫結一個迴圈引數就可以在事件執行時獲取到是哪個input來觸發事件了。
wxml程式碼
<view wx:for="{{list}}" wx:for-item="itemName" wx:for-index="idx"> <input bindinput='inputcode' data-no='{{idx}}'></input>//我再此處向input綁定了for迴圈的index,可以根據需求繫結別的 </view> <button bindtap='add' type='primary'>add</button>
js程式碼
data: { list:[1] }, inputcode:function(e){ console.log('input的繫結資料') console.log(e.currentTarget.dataset.no) console.log('input內容') console.log(e.detail.value) }, add:function(){ var content = this.data.list.concat(1) //向list不斷增加1,僅為參考 this.setData({ list: content }) }