微信小程序：列表多选

本文介绍: 微信小程序：列表多选

效果

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

})

原文地址:https://blog.csdn.net/weixin_46001736/article/details/135377951

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_51900.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。