在微信小程序里面不使用checkbox怎么实现view的多选
wxml文件
<block wx:for="{{itemList}}" wx:key="id">
<view class='item_container' bindtap='itemSelected' data-index='{{index}}'>
<image class='select_icon' src="{{item.isSelected?'/image/selected.png':'/image/unselected.png'}}"></image>
<text class='text'>{{item.name}}</text>
</view>
</block>
wxss文件
.item_container {
display: flex;
flex-direction: row;
align-items: center;
padding: 20rpx;
}
.select_icon {
width: 40rpx;
height: 40rpx;
}
.text {
margin-left: 30rpx;
}
js文件
data: {
itemList: [
{ id: 1, name: '前端', isSelected: false, },
{ id: 2, name: 'ui', isSelected: false, },
{ id: 3, name: '测试', isSelected: false, },
{ id: 4, name: '测试', isSelected: false, },
]
},
itemSelected: function (e) {
var index = e.currentTarget.dataset.index;
var item = this.data.itemList[index];
item.isSelected = !item.isSelected;
this.setData({
itemList: this.data.itemList,
});
}
原文:https://www.cnblogs.com/jessie-xian/p/11571653.html