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

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

需求

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

要解决的问题

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

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

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

弹出框内标签的设置；

滚动栏滚动条的隐藏

如何解决？

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

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

弹出框设置z-index；

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

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

具体实现

wxml

<import alt="微信小程序实现弹出菜单功能" 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 '../../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)的介绍

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

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