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

最近做项目需要这样的需求，当用户点击标签栏按钮，向下弹出菜单，再次点击，收回菜单。接下来通过本文给大家介绍微信小程序实现弹出菜单功能，感兴趣的朋友一起看看吧

需求

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

要解决的问题

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

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

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

弹出框内标签的设置；

滚动栏滚动条的隐藏

如何解决？

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

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

弹出框设置z-index；

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

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

具体实现

wxml

 import src= ../../templates/template / 
 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 #39;../../api/employ #39;
import jobList from #39;../../api/detail #39;
Page({
 data: {
 curIndex: #39; #39;,
 isActive: false,
 jobList:[],
 cur: [],
 job: [],
 isShow: true,
 status: 0,
 isMask: false,
 isSelect: false,
 city: [ #39;全国 #39;, #39;杭州 #39;, #39;北京 #39;, #39;深圳 #39;, #39;上海 #39;, #39;广州 #39;, #39;武汉 #39;, #39;重庆 #39;]
 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 ? #39;!this.data.isActive #39; : #39;true #39; ,
 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: #39;../search/search #39;,
 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)的介绍

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


以上就是微信小程序实现弹出菜单功能的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！