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,
});

},

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签:,