在微信小程序里面不使用checkbox怎么实现view的多选
发布时间：2020-12-14 19:09:27 所属栏目：资源 来源：网络整理
导读：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 ? ? ?
|
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: 'C语言',isSelected: false,},
? ? ? { id: 2,name: 'Java',
? ? ? { id: 3,name: 'C++',
? ? ]
? },
?
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,
? ? });
? }
效果如图
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
