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