小程序中經(jīng)常會(huì)有篩選側(cè)邊欄的按鈕，今天用原生小程序?qū)崿F(xiàn)這一功能。

1.wxml核心代碼

<button class="filterBtn" bindtap="translate"><text>篩選</text><text class="iconfont icon-shaixuan"></text> </button> <view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}}"><view class="closebtn" bindtap="success"></view><view class="animation-element" style="padding-top: {{navHeight}}px"><form class="filterForm" style="height: calc(100% - {{filterBtnHeight}}px);"><view class="filterbox"><view class="filter-label"><text class="title">模特類型</text></view> <view class="filtergroup"><checkbox-group bindchange="modelChange"> <label wx:for="{{listModel}}" wx:key="*this" class="txt-ellipsis {{item.checked?'active':''}}"><checkbox value="{{item.code}}" checked="{{item.checked}}" />{{item.value}}</label></checkbox-group></view></view><view class="filterbox"><view class="filter-label"><text class="title">年齡</text></view><view class="filtergroup"><input type="text" placeholder="最低年齡" placeholder-class="input-placeholder"></input><view class="line"></view><input type="text" placeholder="最高年齡" placeholder-class="input-placeholder"></input></view></view><view class="filterbox"><view class="filter-label"><text class="title">所在城市</text><label class="selectAll" bindtap="selectall"><checkbox value="all" checked="{{select_all}}" />{{select_all_font}}</label></view><view class="filtergroup"><checkbox-group bindchange="checkChange"><label wx:for="{{listCity}}" wx:key="*this" class="txt-ellipsis {{item.checked?'active':''}}"><checkbox value="{{item.code}}" checked="{{item.checked}}" />{{item.value}}</label></checkbox-group></view></view></form><view class='filter-btn'><button formType="reset" class="filterbtn-reset">重置</button><button formType="submit" class="filterbtn-submit" bindtap="success">確定</button></view></view> </view>

2.wcss核心代碼

.filter .filter-main .float {position: fixed;top: 0;right: 0;height: 100%;width: 100%;z-index: 20;background-color: rgba(0, 0, 0, 0.5);visibility: hidden;-webkit-transition: all 0.3s;-o-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; } .filter .filter-main .isRuleShow {visibility: visible; } .filter .filter-main .isRuleHide {visibility: hidden; } .filter .filter-main .closebtn {position: absolute;top: 0;left: 0;width: 22%;height: 100%; } .filter .filter-main .animation-element {overflow: hidden;position: absolute;top: 0;right: -100%;width: 78%;height: 100%;z-index: 30;padding-top: 38rpx;background-color: #ffffff;-webkit-transition: all 0.5s;-o-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s; } .filter .filter-main .animation-element .filterForm {position: relative;display: block;width: 100%;overflow-y: auto; } .filter .filter-main .isRuleShow .animation-element {right: 0; } .filter .filter-main .filterbox {padding: 20rpx 30rpx 30rpx;border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx; } .filter .filter-main .filterbox .filter-label {display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-justify-content: space-between;-moz-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-items: center;-moz-box-align: center;-ms-flex-align: center;align-items: center; } .filter .filter-main .filterbox .filter-label .title {font-size: 30rpx;color: #333; } .filter .filter-main .filterbox .filter-label label {font-size: 26rpx;color: var(--themeColor); } .filter .filter-main .filterbox .filter-label label radio, .filter .filter-main .filterbox .filter-label label checkbox {display: none; } .filter .filter-main .filterbox .filtergroup {padding-top: 20rpx;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-justify-content: space-between;-moz-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-items: center;-moz-box-align: center;-ms-flex-align: center;align-items: center; } .filter .filter-main .filterbox .filtergroup label {float: left;position: relative;width: -webkit-calc(26.66666667%);width: -moz-calc(26.66666667%);width: calc((100% - 20rpx) / 3);padding: 20rpx 16rpx;margin-right: 10rpx;margin-bottom: 10rpx;background-color: #f6f6f6;font-size: 26rpx;color: #333;line-height: 30rpx;text-align: center;-moz-box-sizing: border-box;box-sizing: border-box;border-radius: 6rpx; } .filter .filter-main .filterbox .filtergroup label:nth-child(3n) {margin-right: 0; } .filter .filter-main .filterbox .filtergroup label.active {color: var(--themeColor);background-color: #fffcee; } .filter .filter-main .filterbox .filtergroup label.active::before {content: '+';position: absolute;right: 0;bottom: 0;z-index: 20;font-size: 20rpx;color: #fff;line-height: 20rpx;text-align: center;-webkit-transform: rotateZ(45deg);-moz-transform: rotateZ(45deg);-ms-transform: rotate(45deg);-o-transform: rotateZ(45deg);transform: rotateZ(45deg); } .filter .filter-main .filterbox .filtergroup label.active::after {content: '';position: absolute;bottom: -20rpx;right: -20rpx;width: 40rpx;height: 40rpx;background-color: var(--themeColor);-webkit-transform: rotateZ(45deg);-moz-transform: rotateZ(45deg);-ms-transform: rotate(45deg);-o-transform: rotateZ(45deg);transform: rotateZ(45deg); } .filter .filter-main .filterbox .filtergroup label radio, .filter .filter-main .filterbox .filtergroup label checkbox {display: none; } .filter .filter-main .filterbox .filtergroup input {width: 36%;padding: 12rpx 20rpx;text-align: center;background-color: #f6f6f6;border-radius: 50rpx; } .filter .filter-main .filterbox .filtergroup .input-placeholder {color: #999;text-align: center; } .filter .filter-main .filterbox .filtergroup .line {width: 34rpx;height: 1px;background-color: #f6f6f6; } .filter .filter-main .filter-btn {position: absolute;bottom: 0;left: 0;width: 100%;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex; } .filter .filter-main .filter-btn button {width: 50%;padding: 30rpx 0;font-weight: normal;font-size: 28rpx;border-radius: 0; } .filter .filter-main .filter-btn .filterbtn-reset {color: #333;background-color: #f6f6f6; } .filter .filter-main .filter-btn .filterbtn-submit {color: var(--darkthemeColor);background-color: var(--assistColor); } .filter .filter-main .animation-reset {float: left;line-height: 2;width: 260rpx;margin: 15rpx 12rpx;border: 1px solid #f3f0f0;text-align: center; } .filter .filter-main .animation-button {float: left;line-height: 2;width: 260rpx;margin: 15rpx 12rpx;border: 1px solid #f3f0f0;text-align: center; }

3.js核心代碼

data: {listModel: [{code: "checkbox1",value: "男模"},{code: "checkbox2",value: "女模"},{code: "checkbox3",value: "中老年男模"}],select_all:false,select_all_font: "全選",listCity: [{code: "checkbox1",value: "北京市"},{code: "checkbox2",value: "天津市"},{code: "checkbox3",value: "上海市"},{code: "checkbox4",value: "重慶市"},{code: "checkbox5",value: "河北省"}] },//全選與反全選 selectall: function() {var that = this;that.data.select_all = !that.data.select_allfor (let i = 0; i < that.data.listCity.length; i++) {that.data.listCity[i].checked = that.data.select_all}if (that.data.select_all) {that.data.select_all_font = "取消全選"} else {that.data.select_all_font = "全選"}that.setData({listCity: that.data.listCity,select_all: that.data.select_all,select_all_font: that.data.select_all_font}) },//多選，自定義選中樣式 checkChange: function(e) {var _listCity = this.data.listCityvar _value = e.detail.valuefor (let i = 0; i < _listCity.length; i++) { for (let j = 0; j <= _value.length; j++) {if (_listCity[i].code == _value[j]) {//如果選中的checkbox等于該checkbox，則將checked屬性改為true，結(jié)束本次循環(huán)_listCity[i].checked = truebreak}_listCity[i].checked = false}}this.setData({listCity: _listCity})if (_value.length == _listCity.length) {this.setData({select_all: true,select_all_font: "取消全選"});} else {this.setData({select_all: false,select_all_font: "全選"});} }, //checkbox組只能選擇一個(gè) modelChange: function(e) {var listModel = this.data.listModelvar value = e.detail.valuefor (let i = 0; i < listModel.length; i++) {listModel[i].checked = listModel[i].code == value[value.length - 1]}this.setData({listModel}) },//隱藏底部導(dǎo)航欄tabbar translate: function () {this.setData({isRuleTrue: true})wx.hideTabBar({animation: true}); },//顯示底部導(dǎo)航欄tabbar success: function () {this.setData({isRuleTrue: false})wx.showTabBar({animation: true}); },

完整案例

總結(jié)

以上是生活随笔為你收集整理的微信小程序 筛选侧边栏 全选与反全选的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。