微信小程序二级联动

<view class="l-header _div">

  <view class="l-nav _ul">

    <view class="_li {{issortActive?'active':''}}" bindtap="sort">

    {{changeSortName}}

    </view>

    <view class="_li {{islevelActive?'active':''}}" bindtap="level">

    {{changeLevelName}}

    </view>

  </view>

  <view class="l-screen _div">

    <view class="l-step l-filtration _ul" style="height:auto;overflow:auto;" hidden="{{!issortActive}}">

      <view class="_li {{index==current?'active':''}}" wx:for="{{sortContent}}"> {{item.typeName}} </view>

    </view>

    <view class="l-area l-filtration _ul" hidden="{{!islevelActive}}">

      <view class="_li {{index==currentLevel?'active':''}}" wx:for="{{levelContent}}" v-on:click="changeLeveItem(index)">{{item.name}}</view>

    </view>

  </view>

</view>

<view class="i-shade _div" hidden="{{mask}}" bindtap="closeall"></view>

const app = getApp()

 

Page({

  data: {

    issortActive:false,

    islevelActive:false,

    sortShow:false,

    levelShow:false,

    mask:true,

    changeSortName:"类别",

    changeLevelName:"级别",

    sortContent: [

      {id: "",typeName: "类别0"},

      {id: "",typeName: "类别1"},

      {id: "",typeName: "类别2"},

      {id: "",typeName: "类别3"},

      {id: "",typeName: "类别4"},

    ],

    levelContent:[

      { value: '',name: '全部级别' },

      { value: '国家级',name: '国家级' },

      { value: '省级',name: '省级'  },

      { value: '市级',name: '市级' },

      { value: '区/县级',name: '区/县级' },

    ],

  },

  onLoad: function () {

    

  },

  changeItem:function(index){

    this.current=index;

    this.closeall();

  },

  changeLeveItem:function(index){

    this.currentLevel=index;

    this.closeall();

  },

  closeall:function(){

    this.islevelActive = false;

    this.issortActive = false;

    this.mask = true;

    this.setData({

      islevelActive:this.islevelActive,

      issortActive:this.issortActive,

      mask:this.mask

    })

  },

  sort:function(){

      this.islevelActive = false;

      this.issortActive = !this.issortActive;

      if(this.islevelActive||this.issortActive){

        this.mask = false;

      }else{

        this.mask = true;

      }

      this.setData({

        islevelActive:this.islevelActive,

        issortActive:this.issortActive,

        mask:this.mask

      })

  },

  level:function(){

    this.issortActive = false;

    this.islevelActive = !this.islevelActive;

    if(this.islevelActive||this.issortActive){

      this.mask = false;

    }else{

      this.mask = true;

    }

    this.setData({

      issortActive:this.issortActive,

      islevelActive:this.islevelActive,

      mask:this.mask

    })

  },

})

.l-header {

  background-color: #ffffff;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 15;

}

.l-nav {

  display: flex;

  justify-content: space-between;

  border-bottom: 1px solid #cdcdcd;

  position: relative;

  padding: 0;

}

.l-nav ._li {

  list-style: none;

  text-align: center;

  width: 50%;

  padding: 18rpx 0;

  font-size: 30rpx;

  position: relative;

  color: #333333;

}

.l-nav ._li:after {

  content: '';

  width: 0px;

  height: 0px;

  border: 10rpx solid transparent;

  border-top-color: #333;

  position: relative;

  top: 22rpx;

  left: 12rpx;

}

 

.l-nav .active {

  position: relative;

  color: #DC3023;

}

.l-nav .active:after {

  content: '';

  top: -20rpx;

  width: 0px;

  height: 0px;

  border: 10rpx solid transparent;

  border-bottom-color: #DC3023;

}

.l-step,

.l-area,

.l-place {

  /* display: none; */

  font-size: 28rpx;

}

.l-step ._li,

.l-area ._li,

.l-place ._li {

  padding: 20rpx 20rpx;

  border-bottom: 1px solid #cdcdcd;

  color: #666;

}

.l-step .active,

.l-area .active,

.l-place .active {

  color: #DC3023;

  position: relative;

}

.l-step .active:after,

.l-area .active:after,

.l-place .active:after {

  content: '';

  position: absolute;

  top: 30rpx;

  right: 30rpx;

  width: 30rpx;

  height: 22rpx;

  background-repeat: no-repeat;

  background-size: 100% 100%;

}

.i-shade {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 11;

  /* display: none; */

}