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

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

需求

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

要解决的问题

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

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

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

弹出框内标签的设置；

滚动栏滚动条的隐藏

如何解决？

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

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

弹出框设置z-index；

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

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}

具体实现

wxml

城市筛选

职位筛选

排序方式

{{item}}

{{item.title}}

{{type}}

确认

智能排序

时间排序

薪资排序

搜索

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 ? 'dejPWty!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({

dejPWty jobList:jobList

})

},

click:function (e) {

let id =e.currentTarget.dataset.id;

wx.navigateTo({

url: `../detail/detail?id=${id}`,

})

}

})

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。