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


            需求



点击标签栏按钮，向下弹出菜单，再次点击，收回菜单



要解决的问题





  标签栏三栏样式，标签栏固定不动；

  点击标签栏弹出菜单，并且出现透明遮罩；

  遮罩优先级在弹出框之下；

  弹出框内标签的设置；

  滚动栏滚动条的隐藏

  



如何解决？





  弹性布局，横向，三者平分整栏;

  状态监听点击事件，数据控制hide或者show,通过rgba设置透明度

  弹出框设置z-index；

  弹性布局flex 横向排列 超出后wrap 然后space-around控制间距







::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}



具体实现



wxml





<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>



wxss





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;

}



js





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}`,

  })

 }

})



总结



以上所述是小编给大家介绍的微信小程序实现弹出菜单功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！