微信小程序:列表多选

效果

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

})
相关推荐
paterWang2 小时前
小程序-基于java+SpringBoot+Vue的流浪动物救助小程序设计与实现
java·spring boot·小程序
wqq_9922502776 小时前
ssm面向品牌会员的在线商城小程序
数据库·小程序
h185385922446 小时前
志愿者小程序源码社区网格志愿者服务小程序php
微信小程序·小程序·php·uniapp·源码软件
流着口水看上帝8 小时前
微信小程序技术架构图
微信小程序·小程序
苹果电脑的鑫鑫8 小时前
微信小程序上传微信官方审核流程(1)
微信小程序·小程序
paterWang11 小时前
小程序-基于java+SpringBoot+Vue的农场管理系统设计与实现
java·spring boot·小程序
欧克生活11 小时前
漫步北京小程序+气象景观数字化服务平台,让气象景观触手可及
小程序
wqq_99225027711 小时前
springboot基于微信小程序的停车场管理系统
spring boot·后端·微信小程序
慕斯白狼11 小时前
微信小程序2-地图显示和地图标记
微信小程序·小程序·notepad++