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

需求

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

要解决的问题

标签栏三栏样式，标签栏固定不动；
点击标签栏弹出菜单，并且出现透明遮罩；
遮罩优先级在弹出框之下；
弹出框内标签的设置；
滚动栏滚动条的隐藏

如何解决？

弹性布局，横向，三者平分整栏;
状态监听点击事件，数据控制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}`,
  })
 }
})

总结

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