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

需求点击标签栏按钮，向下弹出菜单，再次点击，收回菜单要解决的问题标签栏三栏样式，

需求

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

要解决的问题

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

如何解决？

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

总结

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

微信小程序 弹出菜单 小程序 弹出菜单