微信小程序：列表多选

最新推荐文章于 2025-06-24 10:01:54 发布

25号底片~

最新推荐文章于 2025-06-24 10:01:54 发布

阅读量1.5k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_46001736/article/details/135377951

微信小程序专栏收录该内容

68 篇文章

订阅专栏

该篇文章详细介绍了在微信小程序中使用WXML、WXSS和JS实现列表项的多选功能，包括HTML结构、CSS样式和JavaScript逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

wxml

<!-- 列表多选 -->
<view wx:for="{{list}}" wx:key="index" class="item_all">
  <view class="position parameter-info text-over {{item.checked ? 'checked_parameter' : ''}}" data-id="{{item.id}}" bindtap="selectcustomer">
    <view class="vv_1">{{item.name}} {{item.checked}}</view>
  </view>
</view>

wxss

/* 列表多选 */

/* 列表 */
.all {
  margin-bottom: 20%;
  border: 1px solid #F0F4F7;
}

.item_all {
  /* border: 1px solid black; */
  margin-bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.position {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 160rpx;
  width: 95%;
  border-radius: 20rpx;
  background-color: #fff;
  box-shadow: 4rpx 4rpx 4rpx gainsboro;
}

.vv_1 {
  margin-left: 5%;
  word-break: break-all;
}

/* 选中之后的样式设置 */
.checked_parameter {
  background-color: #74bfe7;
  color: #fff;
}

.footer button {
  width: 100%;
}

js

Page({
  data: {
    list:[{
      id:1,
      name:'1口',
      checked:false
    },
    {
      id:2,
      name:'2口',
      checked:false
    },
    {
      id:3,
      name:'3口',
      checked:false
    },
  ],
  selectedList: [], // 选中的列表(多选存储的数组)
  },
  // 多选
  selectcustomer: function(e) {
    var this_checked = e.currentTarget.dataset.id; // 获取对应的条目id
    console.log(this_checked)
    var List = this.data.list; // 获取Json数组
    console.log(List)
    var selectedList = this.data.selectedList; // 获取已选中的数据
    console.log(selectedList)
    for (var i = 0; i < List.length; i++) {
      if (List[i].id == this_checked) {
        if (List[i].checked) {
          // 已选中，取消选中状态并从已选列表中移除
          List[i].checked = false;
          var index = selectedList.findIndex(item => item.id === List[i].id);
          if (index !== -1) {
            selectedList.splice(index, 1);
          }
        } else {
          // 未选中，设置为选中状态并添加到已选列表中
          List[i].checked = true;
          selectedList.push(List[i]);
        }
        break;
      }
    }
    console.log('修改后的list：',List)
    console.log('修改后的已选中：',selectedList)
    this.setData({
      list: List,
      selectedList: selectedList
    });
  },

})