微信小程序下拉框（筛选）

wxml页面：   

//主要：



<view class="sort-list">
<view class="sort" bindtap="changeBoxBtn" data-num="0">
全部
<image src="../../images/down.png"style="width:8px;height:8px;"></image>
</view>
<view class="sort" bindtap="changeBoxBtn" data-num="1"> 附近
<image src="../../images/down.png"style="width:9px;height:9px;"></image>
</view>
<view class="sort" bindtap="changeBoxBtn" data-num="2"> 智能排序
<image src="../../images/down.png"style="width:9px;height:9px;"></image>
</view>
<view class="sort" bindtap="changeBoxBtn" data-num="3">
筛选
<image src="../../images/down.png"style="width:9px;height:9px;"></image>
</view>
</view>
//下拉页面：



<!-- 全部 -->
<view class="all-sort-list {{states==0?'all-act':''}}">
<view wx:for="{{all_list}}" class="all-sort" data-index="{{item.num}}">{{item.txt}}</view>
</view>
<!-- 附近 -->
<view class="nearby-sort-list {{states==1?'nearby-act':''}}">
<view>
<view wx:for="{{nearby_list}}" class="nearby-sort" data-index="{{item.num}}">{{item.txt}}</view>
</view>
<view class='nearby-sort-son'>
<view wx:for="{{distance}}">{{item.distances}}</view>
</view>
</view>
<!-- 智能排序 -->
<view class="capacity-sort-list {{states==2?'capacity-act':''}}">
<view wx:for="{{capacity_list}}" class="capacity-sort" data-index="{{item.num}}">{{item.txt}}</view>
</view>
<!-- 筛选 -->
<view class="filterList-box {{states==3?'filter-act':''}}">
<view class="filterList-characteristic-title">用餐时段</view>
<view class="filterList-sort-list">
<view wx:for="{{filterList_list1}}" class="filterList-sort" data-index="{{item.num}}">{{item.time}}</view>
</view>
<view class="filterList-characteristic-title">用餐人数</view>
<view class="filterList-sort-list">
<view wx:for="{{filterList_list2}}" class="filterList-sort" data-index="{{item.num}}">{{item.numbers}}</view>
</view>
<view class="filterList-footer">
<view class="filterList-footer-delect">重置</view>
<view class="filterList-footer-finish">
完成
<view class="filterList-footer-finish-number" hidden="">0 </view>
</view>
</view>
</view>

 

wxss页面：

 

.filterList-sort-list,.all-sort-list,.nearby-sort-son,.nearby-sort-list,.capacity-sort-list,.filterList,.filterList-footer{
background: white;
}
.filterList-sort-list,.all-sort-list,.nearby-sort-son,.nearby-sort-list,.capacity-sort-list{
flex-direction: column;
border-top: 1px solid rgba(0,0,0,0);
display: flex;
}
.filterList-sort,.all-sort,.nearby-sort-son,.nearby-sort,.capacity-sort{
font-size: 25rpx;
height: 70rpx;
line-height: 70rpx;
margin-left: 30rpx;
}
/* ---------------------------------- */
.sort-act{
color: #EB9035;
}
.nearby-sort-list{
position: relative;
min-height:150px;
}
.nearby-sort-son{
position: absolute;
top: 0;
right: 0;
width: 50%;
/* height: 20rem; */
/* background: #eee; */
}
.filterList-sort-list{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
padding:0.5rem 0;
padding-right: 30rpx;
}
.filterList-sort{
height: 1.3rem;
width: 20%;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.filterList-act{
background: #F5A623;
color: #fff
}
.filterList-box{
padding-top: 1rem;
background: #fff;
}
/* ---------------------------------- */
.sort-list{
justify-content: space-around;
display: flex;
background: white;
width: 100%;
height: 32px;
font-size: 27rpx;
color: #6A6A6A;
align-content: center;
border: 1rpx solid #ECECEC;
align-items: center;
}
.sort{
text-align: center;
/* margin: auto 0; */
height: 100%;
line-height: 30px;
border-right: 1rpx solid #ECECEC;
flex: 1;
}
.sort-active{
color: black;
font-weight: 800;
}
.filterList-characteristic-title{
position: relative;
height: 50rpx;
line-height: 50rpx;
background: #FBFBFB;
font-weight: 400;
padding-left: 30rpx;
}
.filterList-characteristic-title::before,
.filterList-discount-title::before{
content: "";
position: absolute;
left: 0;
top: 15rpx;
display: inline-block;
width: 5rpx;
height: 20rpx;
background: #FED161;
}
.filterList-footer{
height: 90rpx;
display: flex;
}
.filterList-footer-delect{
flex: 1;
font-size: 25rpx;
line-height: 90rpx;
padding-left: 30rpx;
}
.filterList-footer-finish{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 90rpx;
font-size: 35rpx;
width: 210rpx;
background: #FFD161;
position: relative;
}
.filterList-footer-finish-number{
height: 30rpx;
width: 30rpx;
line-height: 31rpx;
font-size: 25rpx;
margin-left: 15rpx;
color: #FFD161;
border-radius: 50%;
background: black;
}
.all-sort-list,.nearby-sort-list,.capacity-sort-list,.filterList-box{
display: none;
}
.all-sort-list.all-act,.nearby-sort-list.nearby-act,.capacity-sort-list.capacity-act,.filterList-box.filter-act{
display: block;
}

 

js页面

//获取应用实例
var a = -1;
var b = -1;
var c = -1;
var d = -1;
Page({
    changeBoxBtn: function (e) {
        // console.log(e.target.dataset.num)
        var num = e.target.dataset.num;
        var states=null;
        if (num == 0) {
            states=0;
            a += 1;
            b = -1;
            c = -1;
            d = -1;
            if(a%2 == 1){
                states = 6;
            }
        } else if(num == 1) {
            states = 1;
            a = -1;
            b += 1;
            c = -1;
            d = -1;
            if (b % 2 == 1) {
                states = 6;
            }
        } else if (num == 2) {
            states = 2;
            a = -1;
            b = -1;
            c += 1;
            d = -1;
            if (c % 2 == 1) {
                states = 6;
            }
        } else if (num == 3) {
            states = 3;
            a = -1;
            b = -1;
            c = -1;
            d += 1;
            if (d % 2 == 1) {
                states = 6;
            }
        }
        // console.log(states)

        this.setData({
            states: states
        })
    }
})