微信小程序:列表多选

效果

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

})
相关推荐
拼图20913 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
m0_7401904614 小时前
小程序部分pai
小程序
wocwin14 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
2501_9159184117 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090621 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me1 天前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_23332 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷2 天前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921432 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview