1. wxml部分
<!-- 筛选 --> <view class="page"> <!-- 一级 --> <view class="nav"> <!-- 年龄 --> <view class="nav-son {{shownavindex == 1? 'active' : ''}}" bindtap="listnl" data-nav="1"> <view class="content">{{selectedNl}}</view> <view class="icon"></view> </view> <!-- 品牌 --> <view class="nav-son borders {{shownavindex == 2? 'active' : ''}}" bindtap="listpp" data-nav="2"> <view class="content">{{selectedPp}}</view> <view class="icon"></view> </view> <!-- 规格 --> <view class="nav-son border-r {{shownavindex == 3? 'active' : ''}}" bindtap="listgg" data-nav="3"> <view class="content">{{selectedGg}}</view> <view class="icon"></view> </view> <!-- 功能 --> <view class="nav-son {{shownavindex == 4? 'active' : ''}}" bindtap="listgn" data-nav="4"> <view class="content">{{selectedGn}}</view> <view class="icon"></view> </view> </view> <!-- 年龄 --> <view class="temp temp1 {{nlopen ? 'slidown' : 'slidup'}} {{nlshow ? 'disappear':''}}"> <view wx:for="{{content}}" wx:key="*this" catchtap="selectnl" data-value="{{item}}"> {{item}} </view> </view> <!-- 品牌 --> <view class="temp temp2 {{ppopen ? 'slidown' : 'slidup'}} {{ppshow ? 'disappear':''}}"> <view wx:for="{{content}}" wx:key="*this" catchtap="selectpp" data-value="{{item}}"> {{item}} </view> </view> <!-- 规格 --> <view class="temp temp3 {{ggopen ? 'slidown' : 'slidup'}} {{ggshow ? 'disappear':''}}"> <view wx:for="{{content}}" wx:key="*this" catchtap="selectgg" data-value="{{item}}"> {{item}} </view> </view> <!-- 功能 --> <view class="temp temp4 {{gnopen ? 'slidown' : 'slidup'}} {{gnshow ? 'disappear':''}}"> <view wx:for="{{content}}" wx:key="*this" catchtap="selectgn" data-value="{{item}}"> {{item}} </view> </view> <!-- 透明度 --> <view class="fullbg {{isfull ?'fullopacity':''}}" bindtap="hidebg"></view> </view>
2. wxss
/* 筛选 */ .page{ font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif; width: 750rpx; height: 100%; background: #fff; overflow: hidden; /* position: fixed; top: 120rpx; left: 0; z-index: 9; */ margin-bottom: 10rpx; } .nav{ position: relative; z-index: 99; display: flex; border-top: 1px solid #d1d3d4; border-bottom: 1px solid #d1d3d4; background: #fff; } .nav-son{ display: flex; flex: 1; text-align: center; height: 40px; align-items:center; justify-content:center; font-size: 14px; } .borders{ border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .border-r { border-right: 1px solid #e6e6e6; } .content{ display: inline-block; width: 110rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon{ display: inline-block; border: 4px solid transparent; border-top: 4px solid #9b9b9b; margin-left: 5px; } .temp{ position: relative; z-index: 4; } .temp1, .temp2, .temp3, .temp4 { display: none; width: 100%; max-height: 750rpx; overflow-y: scroll; padding: 0 0 0 20rpx; line-height:100rpx; background: #fff; } .slidedown{ transform: translateY(0%); } .temp view{ border-bottom: 1px solid #d1d3d4; font-size: 14px; color: #666; } .quyu{ position: relative; display: none; height: 450rpx; z-index: 5; } .quyu .qy{ overflow-y: scroll; float: left; width: 33.33%; height: 450rpx; line-height: 80rpx; box-sizing: border-box; font-size: 14px; color: #717273; } .qy view{ text-overflow: ellipsis; overflow: hidden; white-space:nowrap; padding-left: 15rpx; } .quyu-left{ background: #c5c5c5; } .quyu-center{ background: #e0e0e0; } .quyu-right{ background: #fff; } .quyu-right view{ border-bottom: 1px solid #c5c5c5; } .current{ background: #e0e0e0; } .current2{ background: #fff; } .fullbg{ position: fixed; top:0; z-index: 1; width: 100%; height: 100%; background: rgb(1, 1, 1); transition: all 2s; opacity: 0; } .fullopacity{ opacity: .5; } .nav-son.active .content{ color: #61beff; } .nav-son.active .icon{ border-bottom: 4px solid #61beff; border-top:0; } @keyframes slidown{ from{ transform: translateY(-100%); } to{ transform: translateY(0%); } } .slidown{ display: block; animation: slidown .7s ease-in both; } @keyframes slidup{ from{ transform: translateY(0%); } to{ transform: translateY(-100%); } } .slidup{ display: block; animation: slidup .7s ease-in both; } .disappear{ display: none; }
3. js
Page({ /** * 页面的初始数据 */ data: { content: [], nl: [], pp: [], gg: [], gn: [], selectedNl: '年龄', selectedPp: '品牌', selectedGg: '规格', selectedGn: '功能', nlopen:false, // 年龄展开 ppopen:false, // 品牌展开 ggopen:false, // 规格展开 gnopen:false, // 功能展开 nlshow:false, // 年龄下拉菜单显示 ppshow:false, // 品牌下拉菜单显示 ggshow:false, // 规格下拉菜单显示 gnshow:false, // 功能下拉菜单显示 isfull:false, // 是否透明 select1: '', select2:'', shownavindex:'' }, // 年龄 listnl: function(e){ if(this.data.nlopen){ this.setData({ // 展开 -- 全部false // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:false, ggopen:false, gnopen:false, nlshow:false, ppshow:true, ggshow:true, gnshow:true, isfull:false, shownavindex: 0 }) }else{ this.setData({ content:this.data.nl, // 展开 -- 只有判断的是 true // 下拉菜单 -- 只有判断的是 false nlopen:true, ppopen:false, ggopen:false, gnopen:false, nlshow:false, ppshow:true, ggshow:true, gnshow:true, isfull:true, shownavindex:e.currentTarget.dataset.nav }) } }, // 品牌 listpp: function(e){ if(this.data.ppopen){ this.setData({ // 展开 -- 全部false // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:false, ggopen:false, gnopen:false, nlshow:true, ppshow:false, ggshow:true, gnshow:true, isfull:false, shownavindex: 0 }) }else{ this.setData({ content:this.data.pp, // 展开 -- 只有判断的是 true // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:true, ggopen:false, gnopen:false, nlshow:true, ppshow:false, ggshow:true, gnshow:true, isfull:true, shownavindex:e.currentTarget.dataset.nav }) } }, // 规格 listgg: function(e){ if(this.data.ggopen){ this.setData({ // 展开 -- 全部false // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:false, ggopen:false, gnopen:false, nlshow:true, ppshow:true, ggshow:false, gnshow:true, isfull:false, shownavindex: 0 }) }else{ this.setData({ content:this.data.gg, // 展开 -- 只有判断的是 true // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:false, ggopen:true, gnopen:false, nlshow:true, ppshow:true, ggshow:false, gnshow:true, isfull:true, shownavindex:e.currentTarget.dataset.nav }) } // console.log(e.target) }, // 功能 listgn: function(e){ if(this.data.gnopen){ this.setData({ // 展开 -- 全部false // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:false, ggopen:false, gnopen:false, nlshow:true, ppshow:true, ggshow:true, gnshow:false, isfull:false, shownavindex: 0 }) }else{ this.setData({ content:this.data.gn, // 展开 -- 只有判断的是 true // 下拉菜单 -- 只有判断的是 false nlopen:false, ppopen:false, ggopen:false, gnopen:true, nlshow:true, ppshow:true, ggshow:true, gnshow:false, isfull:true, shownavindex:e.currentTarget.dataset.nav }) } // console.log(e.target) }, hidebg: function(e){ this.setData({ // 展开 -- 全 false // 下拉菜单 -- 全 true nlopen:false, ppopen:false, ggopen:false, gnopen:false, nlshow:true, ppshow:true, ggshow:true, gnshow:true, isfull:false, shownavindex: 0 }) }, // 选择筛选标准 // 年龄 selectnl: function (e) { var value = e.target.dataset.value this.setData({ selectedNl: value, nlopen: false, nlshow: true, isfull: false, shownavindex: 0 }) }, // 品牌 selectpp: function (e) { var value = e.target.dataset.value this.setData({ selectedPp: value, ppopen: false, ppshow: true, isfull:false, shownavindex: 0 }) }, // 规格 selectgg: function (e) { var value = e.target.dataset.value this.setData({ selectedGg: value, ggopen: false, ggshow: true, isfull:false, shownavindex: 0 }) }, // 功能 selectgn: function (e) { var value = e.target.dataset.value this.setData({ selectedGn: value, gnopen: false, gnshow: true, isfull:false, shownavindex: 0 }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ nl:['全部','0-1岁','1-3岁','3-5岁','5岁以上'], pp:['全部','小泰克','费雪','伟易达','乐高','哈贝','其他'], gg:['全部','小型','中型','大型','特大型'], gn:['全部','益智/认知类','音乐/感知类','运动健身类','角色扮演类','轨道/玩具车类','童车类','积木/拼搭类','其他'], }) } })
效果展示: