動態新增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
    })
  }
 

input僅為示例，所有頁面元素都可以通過該方式實現無線動態新增！！！