怎么在微信小程序中实现一个全选多选效果-创新互联
怎么在微信小程序中实现一个全选多选效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

wxml代码:
全选 汪小涵 管理员 总监
wxss代码:
.memberList{
background:#fff;
padding:0 35rpx 0 28rpx;
}
.allSelect_box{
line-height:90rpx;
border-bottom:1rpx solid #F5F5F5;
}
.checkbox{
transform: scale(0.7,0.7);
}
.member_box .checkbox{
margin-top: 15rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color:#fff;
background: #6669e3;
border-color:#6669e3;
}
.allSelect{
margin-left:15rpx;
vertical-align:middle;
}
.member_box{
padding-bottom:30rpx;
display: flex;
border-bottom:2rpx solid #EBEBEB;
padding:20rpx 0 20rpx 0;
}
.avatar{
width:100rpx;
border-radius:50%;
margin-left:15rpx;
}
.applicant_name{
font-size:34rpx;
padding:0 0 15rpx 30rpx;
}
.applicant_name text{
color:#fff;
background:#6669e3;
font-size:28rpx;
padding:5rpx 10rpx;
border-radius:10rpx;
margin-left:15rpx;
}
.approval_state{
color:#8D8D8D;
font-size:28rpx;
padding-left: 30rpx;
}js代码:
data: {
list: [
{ id: 1, name: 1, checked: false },
{ id: 2, name: 2, checked: false },
{ id: 3, name: 3, checked: false },
{ id: 4, name: 4, checked: false },
],
selectilall: false
},//单选
select: function (e) {
let selectValue = e.currentTarget.dataset.name
let index = e.currentTarget.dataset.index;
let list = this.data.list
let newli = 'list[' + index + '].checked';
this.setData({
[newli]: !this.data.list[index].checked
})
let num = 0;
for(var i=0;i看完上述内容,你们掌握怎么在微信小程序中实现一个全选多选效果的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:怎么在微信小程序中实现一个全选多选效果-创新互联
URL链接:http://www.jxjierui.cn/article/dgodip.html


咨询
建站咨询
