微信小程序列表多选的一种方式

meetStarry

已于 2022-05-16 16:55:32 修改

阅读量992

点赞数

文章标签：前端

于 2022-04-28 15:23:06 首次发布

本文链接：https://blog.csdn.net/luherlove/article/details/124473677

版权

首先后台拿到数据，对数据进行处理，给每项数据加selected字段

datas.forEach( item => {
    item.selected = false;
})

给列表每项绑定一个点击事件selectItem

<scroll-view class="allItems" scroll-y="{{true}}">
    <view class="item" wx:for="{{newList}}" bindtap="selectItem" data-index="{{index}}""                     
    wx:key="index">
	    <text>{{item.name}}</text>
	    <image wx:if="{{item.selected}}" class="modelImg" src="greenright.png"></image>
    </view>
</scroll-view>

selectItem: function (e) {
    const {index} = e.currentTarget.dataset;//当前点击项角标
    let currentItem = this.data.list; //list列表数据
    currentItem[index].selected =! currentItem[index].selected;
    this.setData({
      newList:currentItem ,
    });
}

.item {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modelImg {
    width:  40rpx;
    height: 40rpx;
}