二十三、小程序中的三级下拉框（下拉菜单）

XHTML部分  
  <view class='area'>
      <view class="product-list">
       <!--条件选择-->
        <view class="choice-bar">
          <!--头部-->
           <!--第一个-->
          <view bindtap="choiceItem" data-item="1" class="chioce-item" hover-class="click-once-opaque">{{name}}
            <image class="icon-chioce" src="{{staticImg}}maintenance/icon-go-black.png"></image>
          </view>


          <!--蜀山区-->
          <view bindtap="choiceItem" data-item="2" class="chioce-item" hover-class="click-once-opaque">{{activeSortingName}}
            <image class="icon-chioce" src="{{staticImg}}maintenance/icon-go-black.png"></image>
          </view>
          <!--默认排序-->
          <view bindtap="choiceItem" data-item="3" class="chioce-item" hover-class="click-once-opaque">{{ordername}}
            <image class="icon-chioce" src="{{staticImg}}maintenance/icon-go-black.png"></image>
          </view>
          <!--对应的下拉框 -->

        <!--名字-->
          <view class="sorting-list{{!chioceDistrict?' chioce-list-hide':' chioce-list-show'}}">
            <view wx:for="{{DjList}}" catchtap="getDistrictList" data-index="{{index}}" class="sorting-item" hover-class="click-once" bindtap='selectColor'>{{item.value}}<text>123</text></view>
          </view>
          <!--地区-->
          <view class="sorting-list{{!chioceSorting?' chioce-list-hide':' chioce-list-show'}}">
            <view wx:for="{{sortingList}}" catchtap="selectSorting" data-index="{{index}}" class="sorting-item" hover-class="click-once" bindtap='selectColor'>{{item.value}}<text>123</text></view>
          </view>
          <!--默认排序-->
          <view class="filter-list{{!chioceFilter?' chioce-list-hide':' chioce-list-show'}}">
            <view wx:for="{{filterList}}" catchtap="selectFilter" data-index="{{index}}" class="filter-item" hover-class="click-once" catchtap="filterButtonClick">{{item.value}}
              <image hidden="{{!item.selected}}" class="icon-selected" src="/pages/maintenance/img/icon-selected.png"></image>
            </view> 
          </view>
        </view>
         <view bindtap="hideAllChioce" class="mask" hidden="{{!chioceDistrict&&!chioceSorting&&!chioceFilter}}">
        </view> 
      </view>
    </view>

　　WXSS样式

/* pages/maintenance/maintenance.wxss */
page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
  background: #f0f0f0;
}  
.navbar{  
  flex: none;  
  display: flex;  
  background: #fff; 
  box-sizing: border-box;
  z-index: 9999;
}  
.navbar .item{  
  position: relative;  
   flex: auto;   
  text-align: center;  
  line-height: 80rpx;  
  padding-top: 1px;
  font-size: 30rpx;
}  
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 4rpx;  
  background: #c00;  
} 
.active {
  background: #c00;
  color: #fff;
}
.area {
  width: 100%;
  height: 84rpx;
  background: #fff;
  border-top: 1px solid #ccc;
  /* display: none; */
}
.fixdd {
  width: 100%;
  height: 78rpx;
  background: #fff;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  padding-left: 43rpx;
}
.fixddImg {
  width: 40rpx;
  height: 40rpx;
   margin-top: 19rpx;
   display: block;
   float: left;
}
.fixddtext {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  color: #888;
}




.stores {
  width: 100%;
  height: 205rpx;
}
.storesLi {
  width: 100%;
  height: 205rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 30rpx;
  margin-top: 10rpx;
}
.storesL {
  width: 150rpx;
  height: 150rpx;
  float: left;
}
.storesL image {
  width: 150rpx;
  height: 150rpx;
}
.storesR {
  width: 530rpx;
  height: 150rpx;
  float: left;
  position: relative;
  box-sizing: border-box;
  padding-left: 20rpx;
}
.Ul {
  width: 77%;
  height: 150rpx;
}
.storestext1 {
  font-size: 30rpx;
}
.storestext2 {
  font-size: 24rpx;
  color: #888;
}
.storestext3 {
  font-size: 24rpx;
  color: #888;
  line-height: 50rpx;
}
.storestext3 text {
  color: #c00;
  margin-right: 30rpx;
}
.selt {
  width: 87rpx;
  height: 81rpx;
  line-height: 81rpx;
  border-radius: 10rpx;
  border: 1px solid #888;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  font-size: 24rpx;
  color: #888;
}
.dist {
  position: absolute;
  right: 0;
  bottom: 0;font-size: 24rpx;
  color: #888;
}

.editor {
  width: 100%;
  height: 100rpx;
  background: #fff;
  margin-top: 50rpx;
  box-sizing: border-box;
  padding-left: 56rpx;
}
.editortext1 {
  height: 100rpx;
  line-height: 100rpx;
}
.editorImg {
  width: 45rpx;
  height: 45rpx;
  margin-top: 28rpx;
  float: right;
  margin-right: 40rpx;
}
.editortext1 {
  font-size:30rpx;
  margin-right: 50rpx;
}
.editortext2 {
  display: inline-block;
  width: 100rpx;
  height: 45rpx;
  font-size: 24rpx;
  background: #c00;
  color: #fff;
  text-align: center;
  line-height: 45rpx;
}
.addEdict {
  width: 80%;
  height: 80rpx;
  color: #fff;
  line-height: 80rpx;
  background: #c00;
  margin-top: 80rpx;
} 

/*顶部的下拉框样式*/

.product-list {
  min-height: 100vh;
  background-color: #f0f0f0;
  padding-top: 80rpx;
  box-sizing: border-box;
}

/*条件选择*/

.choice-bar {
  position: absolute;
  top: 80rpx;
  display: flex;
  width: 100vw;
  font-size: 16px;
  background-color: #fff;
  z-index: 9;
}

.chioce-item {
  background-color: #fff;
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  width: 33.3%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-top: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
  border-left: 1rpx solid #ddd;
  font-size: 26rpx;
  /*border-right: 1rpx solid #ddd;*/
}

.chioce-item-last {
  border-right: none;
}

.chioce-item-first {
  border-left: none;
}

.icon-chioce {
  height: 25rpx;
  width: 25rpx;
}
.mask{
  position: fixed;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
}
.district-list,.sorting-list,.filter-list {
  margin-top: 2rpx;
  position: absolute;
  top: 80rpx;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: -1;
  font-size: 14px;
  border-bottom: 1rpx solid #ddd;
}

.chioce-list-show {
  top: 80rpx;
  animation: slide 500ms;
}

@keyframes slide {
  0% {
    top: -500rpx;
  }

  100% {
    top: 80rpx;
  }
}

.chioce-list-hide {
  display: none !important;
}

/*区域位置*/

.district-list {
  display: flex;
}

.district-left {
  flex-grow: 1;
}

.district-right {
  flex-grow: 4;
}
.scroll-district{
  height: 500rpx;
}
.district-parent {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 40rpx;
  border-bottom: 1rpx solid #ddd;
  border-right: 1rpx solid #ddd;
  background-color: #f0f0f0;
}

.district-parent-active {
  background-color: #fff;
}

.district-children {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 40rpx;
  border-bottom: 1rpx solid #ddd;
}

/*综合排序*/
.sorting-item {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 40rpx;
  border-bottom: 1rpx solid #ddd;
}
.sorting-item text {
  float: right;
}
 
/*筛选*/

.filter-item {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 40rpx;
  border-bottom: 1rpx solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-selected {
  height: 30rpx;
  width: 30rpx;
}

.filter-footer {
  display: flex;
  justify-content: space-between;
}

.filter-footer button {
  margin: 20rpx 80rpx;
  border-radius: 0 !important;
}

.button-reset {
  border: 1rpx solid #ddd !important;
  color: #666 !important;
}
.seleColor {
  color: #c00;
}

　　JS

// pages/maintenance/maintenance.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    staticImg: app.globalData.staticImg,
    
    curIndex: 0,
    currentTab: 0,
    // 下拉框的data值
    typeID: 0,
    isLoading: true,
    loadOver: false,
    districtList: [],
    sortingList: [{ key: 1, value: "合肥市" }, {
      key: 2, value: "合肥市"
    }, {
      key: 3, value: "瑶海区"
    }, {
      key: 4, value: "瑶海区"
    }, {
      key: 5, value: "瑶海区"
    }, {
      key: 6, value: "瑶海区"
    }],
    filterList: [
      { key: 1, value: "默认排序", selected: false },
      { key: 2, value: "距离最近", selected: false },
      { key: 3, value: "评分最高", selected: false },
      { key: 4, value: "累计订单", selected: false },
    ],
    DjList: [
      { key: 1, value: "邓杰"},
      { key: 2, value: "小明"},
      { key: 3, value: "小唐"},
      { key: 4, value: "小杰"},
    ],
    // districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
    // sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
    chioceDistrict: false,
    chioceSorting: false,
    chioceFilter: false,
    // activeDistrictParentIndex: -1,
    // activeDistrictChildrenIndex: -1,
    // activeDistrictName: "区域位置",
    // scrollTop: 0,
    // scrollIntoView: 0,
    // activeSortingIndex: -1,
    activeSortingName: "蜀山区",
    ordername: "默认排序",
    name:"貂蝉"
  },


  // 下拉框的对应js
  //条件选择
  choiceItem: function (e) {
    switch (e.currentTarget.dataset.item) {
      case "1":
        if (this.data.chioceDistrict) {
          this.setData({
            districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            chioceDistrict: false,
            chioceSorting: false,
            chioceFilter: false,
          });
        }
        else {
          this.setData({
            districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            chioceDistrict: true,
            chioceSorting: false,
            chioceFilter: false,
          });
        }
        break;
     
     
      case "2":
        if (this.data.chioceSorting) {
          this.setData({
            districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            chioceDistrict: false,
            chioceSorting: false,
            chioceFilter: false,
          });
        }
        else {
          this.setData({
            districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            chioceDistrict: false,
            chioceSorting: true,
            chioceFilter: false,
          });
        }
        break;
      case "3":
        if (this.data.chioceFilter) {
          this.setData({
            districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            chioceDistrict: false,
            chioceSorting: false,
            chioceFilter: false,
          });
        }
        else {
          this.setData({
            districtChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
            chioceDistrict: false,
            chioceSorting: false,
            chioceFilter: true,
          });
        }
        break;
    }
  },
  getDistrictList: function (e) {
    var index = e.currentTarget.dataset.index;
    this.setData({
      sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
      chioceDistrict: false,
      activeSortingIndex: index,
      name: this.data.DjList[index].value,
      productList: [],
      pageIndex: 1,
      loadOver: false,
      isLoading: true
    })
  },
  //蜀山区
  selectSorting: function (e) {
    var index = e.currentTarget.dataset.index;
    this.setData({
      sortingChioceIcon: "/pages/maintenance/img/icon-go-black.png",
      chioceSorting: false,
      activeSortingIndex: index,
      activeSortingName: this.data.sortingList[index].value,
      productList: [],
      pageIndex: 1,
      loadOver: false,
      isLoading: true
    })
  },
  //默认排序
  filterButtonClick: function (e) {
    var index = e.currentTarget.dataset.index;
    this.setData({
      chioceFilter: false,
      productList: [],
      pageIndex: 1,
      loadOver: false,
      isLoading: true,
      ordername: this.data.filterList[index].value,
    })
  },
})

　　

转载于:https://www.cnblogs.com/deng-jie/p/9239527.html