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

需求

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

要解决的问题

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

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

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

4. 弹出框内标签的设置；

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

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

3. 弹出框设置z-index；

4. 弹性布局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}`,   })  } })

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序图表插件(wx-charts)的介绍

微信小程序表单验证错误提示效果

以上就是微信小程序实现弹出菜单功能的详细内容，更多内容请关注技术你好其它相关文章！