动态添加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
})
}