小程序：下拉菜单

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>

View Code

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;
}

View Code

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:['全部','益智/认知类','音乐/感知类','运动健身类','角色扮演类','轨道/玩具车类','童车类','积木/拼搭类','其他'],
    })
  }
})

View Code

效果展示：

小程序： 下拉菜单

猜你喜欢

小程序：下拉菜单