微信小程序:列表多选
2024-01-07 17:25:09
效果
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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!