小程序中经常会有筛选侧边栏的按钮，今天用原生小程序实现这一功能。
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
});
},