2020年12月23日

微信小程序切图之 多选js写法


微信小程序切图之 多选js写法,并且统计选择数量。

html代码

<div class=”item {{item.isSelected ? ‘on’ : ”}}” wx:for=”{{itemList}}” wx:key=”id” data-current=”{{index}}” catchtap=”tap”>
<image src=”../../assets/images/img-222×222.png”/>
<label class=”check”>
<image src=”../../assets/images/icon_radio_normal.png” class=”off”/>
<image src=”../../assets/images/icon_radio_select.png” class=”on”/>
</label>
</div>

 

js代码片段

data: {
//普通选择器
itemList: [
{ id: 1, isSelected: false, },
{ id: 2, isSelected: false, },
{ id: 3, isSelected: false, },
{ id: 4, isSelected: false, },
{ id: 5, isSelected: false, },
{ id: 6, isSelected: false, },
{ id: 7, isSelected: false, },
{ id: 8, isSelected: false, },
{ id: 9, isSelected: false, },
{ id: 10, isSelected: false, },
{ id: 11, isSelected: false, },
{ id: 12, isSelected: false, },

],

},

tap:function(e){
var current=e.currentTarget.dataset.current;//获取到绑定的数据

var item = this.data.itemList[current];
item.isSelected = !item.isSelected;
this.setData({
itemList: this.data.itemList,
});

/*统计数量*/
var items = this.data.itemList;
//var limitNum = 12;
var curNum = 0;

//选中累加
for (var i in items) {
if (items[i].isSelected) {
curNum += 1;
}
}
//console.log(curNum);
this.setData({
curNum: curNum,
});

},

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》