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，可以根据需求绑定别的/viewbutton 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    })  }