微信小程序:列表多选

效果

wxml

html 复制代码
<!-- 列表多选 -->
<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

css 复制代码
/* 列表多选 */

/* 列表 */
.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

javascript 复制代码
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
    });
  },

})
相关推荐
The_era_achievs_hero2 小时前
微信小程序71~80
微信小程序·小程序
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_7 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子11 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记11 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812112 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero14 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠15 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序