小程序动态添加组件wx:for实现--小程序走过的坑（8）（最新版）

demo

动态添加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仅为示例，所有页面元素都可以通过该方式实现无线动态添加！！！