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>

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

// 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,})},
})