微信小程序 筛选侧边栏 全选与反全选

小程序中经常会有筛选侧边栏的按钮，今天用原生小程序实现这一功能。

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_all
    for (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.listCity
    var _value = e.detail.value
    for (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，结束本次循环
          _listCity[i].checked = true
          break
        }
        _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组只能选择一个
modelChange: function(e) {
    var listModel = this.data.listModel
    var value = e.detail.value
    for (let i = 0; i < listModel.length; i++) {
      listModel[i].checked = listModel[i].code == value[value.length - 1]
    }
    this.setData({
      listModel
    })
},
  
//隐藏底部导航栏tabbar
translate: function () {
    this.setData({
      isRuleTrue: true
    })
    wx.hideTabBar({
      animation: true
    });
},
 
//显示底部导航栏tabbar
success: function () {
    this.setData({
      isRuleTrue: false
    })
    wx.showTabBar({
      animation: true
    });
},