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

需求

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

要解决的问题

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

如何解决？

1. 弹性布局，横向，三者平分整栏;
2. 状态监听点击事件，数据控制hide或者show,通过rgba设置透明度
3. 弹出框设置z-index；
4. 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距

rush:js;"> ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

具体实现

wxml

rush:js;"> 搜索

wxss

rush:js;"> 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

rush: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' ",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}`,}) } })

总结

以上所述是小编给大家介绍的微信小程序实现弹出菜单功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。