入坑微信小程序必经之路（五）循环动态添加删除列表

<block wx:for="{{scoreList}}" wx:key>
<view>
<view>
<text></text> 第{{item.num}}节
</view>
</view>
<view>
<view>分数</view>
<picker bindchange="scoreChange" value="{{item.score}}" range="{{scoreArr}}">
<view>
{{item.score?scoreArr[item.score]:‘请选择‘}}
</view>
</picker>
</view>
</block>
<view>
<button bindtap="objectAdd">增加</button>
<button bindtap="objectMove">减少</button>
</view>

Page({
data: {
scoreList: [], //分数数组
scoreArr: ["0分", "1分", "2分", "3分", "4分", "5分"],
num: 0,
},
scoreChange(e) {
var that = this;
var tempList = that.data.scoreList;
for (var i = 0; i < tempList.length; i++) {
//找到所选的下拉框赋值
if (tempList[i]["num"] == e.currentTarget.dataset.num) {
tempList[i]["score"] = e.detail.value;
break;
}
}
//改变后的值赋值scoreList重新绑定
that.setData({
scoreList: tempList
})
console.log(‘scoreList=‘ + JSON.stringify(that.data.scoreList)) //最终提交到后台得到数据
},
//添加一个列表
objectAdd(e) {
var that = this
var addlist = this.data.scoreList;
var obj = {
score: null,
num: this.data.num + 1
}
addlist.push(obj)
this.setData({
scoreList: addlist,
num: this.data.num + 1
})
},
//减少一个列表 从最后一个开始减少
objectMove(e) {
if (this.data.scoreList.length > 0) {
this.data.scoreList.splice(this.data.scoreList.length - 1, 1);
this.setData({
scoreList: this.data.scoreList,
num: this.data.num - 1,
})
}
}
})