小程序 下拉选择

wxml:

<view class="box">
    <view class='swiper-tab'>
      <view class="swiper-tab-list {{currentTab == 0 ? 'active' : ''}}" data-current="0" bindtap='getCurrent'>
      入驻时间<text class="margin-left {{currentTab == 0 ? 'arrow-top' : 'arrow-bottom'}}" data-current="0"></text>
      </view>
      <view class="swiper-tab-list {{currentTab == 1 ? 'active' : ''}}" data-current="1" bindtap='getCurrent'>
      全城<text class="margin-left {{currentTab == 1 ? 'arrow-top' : 'arrow-bottom'}}" data-current="1"></text>
      </view>
      <view class="swiper-tab-list {{currentTab == 2 ? 'active' : ''}}" data-current="2" bindtap='getCurrent'>
      餐饮美食<text class="margin-left {{currentTab == 2 ? 'arrow-top' : 'arrow-bottom'}}" data-current="2"></text>
      </view>
    </view>

    <view class='swiper-content' wx:if="{{showcurrent}}">
      <view wx:if="{{currentTab==0}}" class='cur'>
        <block wx:for="{{[1,2,3,4]}}">
          <view class='cur1' bindtap='getScreen'>默认排序</view>
        </block>
      </view>

      <view wx:if="{{currentTab==1}}"  class='cur'>
        <block wx:for="{{[1,2,3,4]}}">
          <view class='cur1'  bindtap='getScreen'>全城</view>
        </block>
      </view>

      <view wx:if="{{currentTab==2}}" class='cur curTxt'>
        <view class='curleft'>
          <block wx:for="{{[1,2]}}" wx:for-index="idx">
            <view class="cur1 {{idx == listCurrent?'activeCur1' : ''}}" bindtap="switchLeftTab" data-id="{{idx}}">
            全部分类
            </view>
          </block>
        </view>

        <view class='cur1right'>
          <view wx:if="{{listCurrent == 0}}">
            <block wx:for="{{[1,2,3,4]}}">
              <view class='cur1'  bindtap='getScreen'>11111111</view>
            </block>
          </view>
          <view wx:if="{{listCurrent == 1}}">
            <block wx:for="{{[1,2,3,4]}}">
              <view class='cur1'  bindtap='getScreen'>222222222</view>
            </block>
          </view>
        </view>
      </view>
    </view>
    <view class='hidden-model' bindtap='getHiddenModel' wx:if="{{HiddenShow}}"></view>
    
</view>

js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    // currentTab:0,
    // listCurrent:0
    HiddenShow:false,
    showcurrent:false
  },

  onLoad: function () {
    
  },
  /**
   * 点击tab
   */
  getCurrent:function(e){
    var that = this;
    if (that.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
        HiddenShow:true,
        showcurrent: true
      })
    }
  },
  /**
   * 左边分类
   */
  switchLeftTab: function (e) {
    var that = this;
    if (that.data.listCurrent === e.currentTarget.dataset.id) {
      return false;
    } else {
      that.setData({
        listCurrent: e.currentTarget.dataset.id
      })
    }
  },
  /**
   * 弹出层
   */
  getHiddenModel:function(){
    this.setData({
      HiddenShow:false,
      showcurrent:false,
      currentTab:-1
    })
  },
  /**
   * 筛选
   */
  getScreen:function(){
    this.setData({
      HiddenShow: false,
      showcurrent: false,
      currentTab: -1
    })
  }

})

css

  .box {
  height: 100%;
  margin-top: 200rpx;
  font-size: 30rpx;
}
.arrow-top{
  display: inline-block; 
  border-top: 2rpx solid #888;
  border-right: 2rpx solid #888;  
  width: 20rpx;
  height: 20rpx;  
  transform: rotate(315deg); 
  transition: .5s;
}
.arrow-right{
  display: inline-block;  
  border-top: 2rpx solid #888;
  border-right: 2rpx solid #888;  
  width: 20rpx;
  height: 20rpx;  
  transform: rotate(45deg); 
}
.arrow-bottom{
  display: inline-block;
  border-top: 2rpx solid #888;
  border-right: 2rpx solid #888;  
  width: 20rpx;
  height: 20rpx;  
  transform: rotate(135deg);
  transition: .5s;
}
.hidden-model{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}
.swiper-tab{
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  background-color:paleturquoise;
  display: flex;
  justify-content: space-evenly; 
  z-index: 55 !important;
}
.swiper-tab-list{
    color: #888;
}
.swiper-tab-list .arrow-bottom{
  vertical-align:6rpx;
}
.swiper-tab-list .arrow-top{
  vertical-align: -8rpx;
}
.active{
  color: palevioletred;
}
.swiper-content{
  width: 100%;
  height: 500rpx;
  z-index: 55 !important;
  background: #fff;
}
.margin-left{
  margin-left: 15rpx;
}
.curTxt{
  display: flex;
  flex-direction: row;
}
.cur1{
  padding-left: 20rpx; 
  line-height: 80rpx;
  border-bottom: 1rpx solid #EFEFF4;
  /* padding-left:20rpx; */
  animation:mymove .5s; 
}

@keyframes mymove
{
from {padding-left: 60rpx;opacity: 0}
to {padding-left: 20rpx;opacity: 1}
}

.curleft{
  width: 30%;
  border-right: 1rpx solid #EFEFF4;
}
.cur1right{
  width: 68%;
  padding-left: 20rpx;
}
.activeCur1{
  color: palevioletred;
  background: #EEEEEE;
}

做的一个小示例，如果有错误的地方请指出来，不胜感激...