接上一篇，需求需要实现点击动态添加数据，且是一行多列，在test中实现类似效果，先记录下来。
图片如图所示，每点击一次添加选项，添加两个输入框 ，可多次点击添加多个数据。
wxml:
block wx:for="{{lists}}" wx:key="{{index}}"
input class='create-li' data-id="{{index}}" value='{{lists[index][0]}}' placeholder="选项1" bindinput='bindKeyInput'/input
input class='create-li' data-id="{{index}}" value='{{lists[index][1]}}' placeholder="选项2" bindinput='bindKeyInput2'/input
/block
button class='add-li' bindtap='addList'添加选项/button
button class='add-li' bindtap='delList'删除选项/button
js:
//获取应用实例
var app = getApp()
Page({
data: {
hiddenmodalput: true,
lists: [],
text:"",
//可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框
},
addList: function () {
var lists = this.data.lists;
var newData = {};
lists.push(newData);//实质是添加lists数组内容，使for循环多一次
this.setData({
lists: lists,
})
},
delList: function () {
var lists = this.data.lists;
lists.pop(); //实质是删除lists数组内容，使for循环少一次
this.setData({
lists: lists,
})
},
bindKeyInput: function (e) {
var that = this;
var index = e.currentTarget.dataset.id;//使用event.currentTarget.dataset.XX获取内容
that.setData({
text : e.detail.value
})
that.data.lists[index][0] =that.data.text;
console.log("index1", index);
console.log("e", e.detail.value);
console.log("text", that.data.text);
console.log("value1", that.data.lists[index][0]);
},
bindKeyInput2: function (e) {
var that = this;
var index2 = e.currentTarget.dataset.id;//使用event.currentTarget.dataset.XX获取内容
that.setData({
text: e.detail.value
})
that.data.lists[index2][1] = that.data.text;
console.log("index2", index2);
console.log("e2", e.detail.value);
console.log("text", that.data.text);
console.log("value2", that.data.lists[index2][1]);
},
//下面函数是其他功能的，不需要看
//点击按钮痰喘指定的hiddenmodalput弹出框
modalinput: function () {
this.setData({
hiddenmodalput: !this.data.hiddenmodalput
})
},
//取消按钮
cancel: function () {
this.setData({
hiddenmodalput: true
});
},
//确认
confirm: function () {
this.setData({
hiddenmodalput: true
})
},
})
刚开始写博客，简单记录，写的不是很清楚，阅读者请多多包涵~
小程序
