这次给大家带来小程序开发做出弹出菜单功能（附代码），小程序开发做出弹出菜单功能（的注意事项有哪些，下面就是实战案例，一起来看一下。
需求
点击标签栏按钮，向下弹出菜单，再次点击，收回菜单
要解决的问题
标签栏三栏样式，标签栏固定不动；
点击标签栏弹出菜单，并且出现透明遮罩；
遮罩优先级在弹出框之下；
弹出框内标签的设置；
滚动栏滚动条的隐藏
如何解决？
弹性布局，横向，三者平分整栏;
状态监听点击事件，数据控制hide或者show,通过rgba设置透明度
弹出框设置z-index；
弹性布局flex 横向排列 超出后wrap 然后space-around控制间距
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
具体实现
wxml
import /import view
view
view
view 城市筛选 /view
image /image
/view
view
view 职位筛选 /view
image /image
/view
view
view 排序方式 /view
image /image
/view
/view
block
view
block
view {{item}} /view
/block
/view
/block
block
scroll-view
block
view {{item.title}} /view
view
view
view {{type}} /view
/view
/view
/block
view
button 确认 /button
/view
/scroll-view
/block
block
view
view 智能排序 /view
view 时间排序 /view
view 薪资排序 /view
/view
/block
view
view
template /template
/view
/view
view
image /image
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}`,
})
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Angular过滤器做出数据大小写转换
vue做一个按钮组件
以上就是小程序开发做出弹出菜单功能（附代码）的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
浙公网安备33010502012046号