微信小程序动态添加组件和获取多组组件的值
因为微信小程序只能操作数据,根据数据去循环遍历组件,所以添加组件也就是直接的操作数据,对数据进行新增,删除
用下面自己写的例子来解释:
<view class='add' bindtap='onAddPhone'>增加</view>
<view class='box' wx:for="{{lists}}" wx:key="{{index}}">
<view class='del' bindtap='delList' data-idx='{{index}}'>删除</view>
<input type='text' class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{lists[index].name}}' bindinput='bindPhoneDataChangname'/>
<input type='text' class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{lists[index].user}}' bindinput='bindPhoneDataChanguser'/>
<!-- <input type='text' class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{inputVal[index].name}}' bindinput='getInputVal'/> -->
</view>
data: {
lists: []
},
onLoad: function () {
},
onAddPhone: function () {
var lists = this.data.lists;
var newData = {
"name": '',
"user": ''};
if (lists.length >= 3) {
console.log('最多3个')
return;
}
lists.push(newData);
this.setData({
lists: lists,
})
},
delList: function (e) {
var nowidx = e.currentTarget.dataset.idx;//当前索引
var lists = this.data.lists;
lists.splice(nowidx, 1);
this.setData({
lists: lists,
})
},
bindPhoneDataChangname: function (e) {
var nowIdx=e.currentTarget.dataset.idx;//获取当前索引
this.data.lists[nowIdx].name = e.detail.value
console.log(this.data.lists[nowIdx].name)
},
bindPhoneDataChanguser: function (e) {
var nowIdx = e.currentTarget.dataset.idx;//获取当前索引
this.data.lists[nowIdx].user = e.detail.value
console.log(this.data.lists[nowIdx].user)
}
}