微信小程序实现弹出菜单功能

::-webkit-scrollbar {width: 0;height: 0;color: transparent;}

<import src="../../templates/template" /><view class="container {{isMask?'mask':''}}">  <view class="header">    <view class="filterCity {{status=='1' && isActive?'active':''}}" data-status='1' bindtap="changeStatus">      <view class="city">城市筛选</view>      <image src="{{status=='1' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" />    </view>    <view class="filterJob {{status=='2' && isActive?'active':''}}" data-status='2' bindtap="changeStatus">      <view class="job">职位筛选</view>      <image src="{{status=='2' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" />    </view>    <view class="filterOrder {{status=='3'&& isActive?'active':''}}" data-status='3' bindtap="changeStatus">      <view class="order">排序方式</view>      <image src="{{status=='3' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" />    </view>  </view>  <block wx:if="{{isActive==true&&status=='1'}}">    <view class="cityContainer">      <block wx:for="{{city}}" wx:key="id" wx:for-index="index">        <view class="city {{isSelect&&index==curIndex?'select':''}}" data-index="{{index}}" bindtap="select">{{item}}</view>      </block>    </view>  </block>  <block wx:if="{{isActive==true&&status=='2'}}">    <scroll-view scroll-y="true" class="posContainer">      <block wx:for="{{cur}}" data-index='index' wx:for-index='index' wx:key="index">        <view class="title">{{item.title}}</view>        <view class="poscontent">          <view wx:for="{{item.types}}" wx:for-item="type" wx:key='id' wx:for-index="{{index}}" data-index="{{index}}">            <view class="tag {{isSelect&&index==curIndex?'select':''}}" data-id="{{id}}" bindtap="multiSelect">{{type}}</view>          </view>        </view>      </block>      <view class="confirm">        <button class="weui-btn" type="warn">确认</button>      </view>    </scroll-view>  </block>  <block wx:if="{{isActive==true&&status=='3'}}">    <view class="orderContainer">      <view class="block">智能排序</view>      <view class="block">时间排序</view>      <view class="block">薪资排序</view>    </view>  </block>  <view class="listContainer" >    <view wx:for="{{jobList}}" wx:key="index" data-index="{{index}}">      <template is="list-item" data="{{...item}}" />    </view>  </view>  <view class="search " bindtap="search">    <image src="../../youzan-image/search.png" />    <text>搜索</text>  </view></view>

page {  position: relative;  width: 100%;  height: 100vh;}.header {  width: 100%;  height: 80rpx;  position: fixed;  top: 0;  display: flex;  flex-direction: row;  justify-content: space-between;  text-align: center;  color: #313131;  font-size: 16px;  border-bottom: 1rpx solid #eeeeee;  z-index: 9999;  background-color: #fff;}.filterCity {  flex: 1;  position: relative;  height: 80rpx;  line-height: 80rpx;}.filterJob {  position: relative;  flex: 1;  height: 80rpx;  line-height: 80rpx;}.filterOrder {  position: relative;  flex: 1;  height: 80rpx;  line-height: 80rpx;}.header image {  position: absolute;  right: 15rpx;  top: 26rpx;  width: 30rpx;  height: 30rpx;}.active {  color: #ef0001;}.mask {  width: 100%;  height: 100%;  position: fixed;  top: 80rpx;  background-color: rgba(15, 15, 26, 0.3);}.cityContainer {  display: flex;  flex-direction: row;  justify-content: space-around;  align-items: space-between;  flex-wrap: wrap;  width: 100%;  height: 300rpx;  z-index: 999;  background-color: #fff;  border-bottom: 1rpx solid #e9e9e9;  padding-bottom: 130rpx;}.cityContainer .city {  display: block;  font-size: 15px;  margin-top: 100rpx;  width: 150rpx;  height: 50rpx;  line-height: 50rpx;  text-align: center;  border: 1rpx solid #e9e9e9;  overflow: hidden;}.select {  color: #ffffff;  background-color: #ed0000;}.posContainer {  height: 980rpx;  width: 100%;  background-color: #fff;  /* overflow:auto; */}::-webkit-scrollbar {  width: 0;  height: 0;  color: transparent;}.title {  margin-top: 55rpx;  font-size: 15px;  margin-left: 28rpx;}.poscontent {  width: 100%;  display: flex;  flex-direction: row;  justify-content: flex-start;  flex-wrap: wrap;  margin-top: -15rpx;}.tag {  margin-left: 28rpx;  margin-top: 23rpx;  font-size: 13px;  width: 150rpx;  height: 50rpx;  line-height: 50rpx;  text-align: center;  border: 1rpx solid #e9e9e9;}.confirm {  width: 100%;  height: 150rpx;  border: 1rpx solid transparent;  background-color: #fff;}.weui-btn {  position: fixed;  width: 95%;  bottom: 52rpx;  left: 50%;  transform: translateX(-50%);}.orderContainer {  display: flex;  flex-direction: row;  justify-content: space-around;  align-items: center;  background-color: #fff;  width: 100%;  height: 125rpx;}.block {  font-size: 13px;  width: 200rpx;  height: 50rpx;  line-height: 50rpx;  text-align: center;  border: 1rpx solid #e9e9e9;}.search {  position: fixed;  bottom: 80rpx;  background-color: #fff;  right: 25rpx;  width: 150rpx;  height: 75rpx;  line-height: 75rpx;  text-align: center;  border-radius: 35rpx;  box-shadow: 1rpx 1rpx 7rpx 7rpx #f5f5f5;}.search image {  width: 30rpx;  height: 30rpx;}.search text {  font-size: 15px;  padding-left: 9rpx;  color: #666666;}.listContainer {  width: 100%;  height: 100%;  margin-top: 80rpx;}

import category from '../../api/employ'import jobList from '../../api/detail'Page({ data: {  curIndex: '',  isActive: false,  jobList:[],  cur: [],  job: [],  isShow: true,  status: 0,  isMask: false,  isSelect: false,  city: ['全国', '杭州', '北京', '深圳', '上海', '广州', '武汉', '重庆'] }, changeStatus(e) {  let status = e.currentTarget.dataset.status;  let cur = category;  this.setData({   isActive: !this.data.isActive,   status: status,   isMask: !this.data.isMask,   cur: cur,  }) }, select(e) {  let curIndex = e.currentTarget.dataset.index;  this.setData({   isSelect: " curIndex == this.data.curIndex ? '!this.data.isActive' : 'true' ",   isActive: false,   isMask:false,   curIndex: curIndex,  }) }, multiSelect(e){  let multiIndex=e.currentTarget.dataset.index;  this.setData({   isSelect:!this.data.isSelect,   curIndex:multiIndex  }) }, search(e) {  wx.navigateTo({   url: '../search/search',  }) }, onLoad: function (e) {  this.setData({   jobList:jobList  }) }, click:function (e) {  let id =e.currentTarget.dataset.id;  wx.navigateTo({   url: `../detail/detail?id=${id}`,  }) }})