怎么在微信小程序中實(shí)現(xiàn)一個(gè)全選多選效果?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
創(chuàng)新互聯(lián)主營(yíng)五通橋網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開(kāi)發(fā),五通橋h5小程序設(shè)計(jì)搭建,五通橋網(wǎng)站營(yíng)銷推廣歡迎五通橋等地區(qū)企業(yè)咨詢
wxml代碼:
全選 汪小涵 管理員 總監(jiān)
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看完上述內(nèi)容,你們掌握怎么在微信小程序中實(shí)現(xiàn)一個(gè)全選多選效果的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
本文標(biāo)題:怎么在微信小程序中實(shí)現(xiàn)一個(gè)全選多選效果
分享URL:http://weahome.cn/article/ihcgsj.html