匿名通过本文主要向大家介绍了微信小程序,弹出菜单,小程序,弹出菜单等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
最近做项目需要这样的需求，当用户点击标签栏按钮，向下弹出菜单，再次点击，收回菜单。接下来通过本文给大家介绍微信小程序实现弹出菜单功能，感兴趣的朋友一起看看吧
需求
点击标签栏按钮，向下弹出菜单，再次点击，收回菜单
要解决的问题
标签栏三栏样式，标签栏固定不动；
点击标签栏弹出菜单，并且出现透明遮罩；
遮罩优先级在弹出框之下；
弹出框内标签的设置；
滚动栏滚动条的隐藏
如何解决？
弹性布局，横向，三者平分整栏;
状态监听点击事件，数据控制hide或者show,通过rgba设置透明度
弹出框设置z-index；
弹性布局flex 横向排列 超出后wrap 然后space-around控制间距
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}具体实现
wxml
<import src="../../templates/template" />
<view class="container {{isMask?'mask':''}}">
<view class="header">
<view class="filterCity {{status=='1' && isActive?'active':''}}" data-status='1' bindtap="changeStatus">
<view class="city">城市筛选</view>
<image src="{{status=='1' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" />
</view>
<view class="filterJob {{status=='2' && isActive?'active':''}}" data-status='2' bindtap="changeStatus">
<view class="job">职位筛选</view>
<image src="{{status=='2' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" />
</view>
<view class="filterOrder {{status=='3'&& isActive?'active':''}}" data-status='3' bindtap="changeStatus">
<view class="order">排序方式</view>
<image src="{{status=='3' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" />
</view>
</view>
<block wx:if="{{isActive==true&&status=='1'}}">
<view class="cityContainer">
<block wx:for="{{city}}" wx:key="id" wx:for-index="index">
<view class="city {{isSelect&&index==curIndex?'select':''}}" data-index="{{index}}" bindtap="select">{{item}}</view>
</block>
</view>
</block>
<block wx:if="{{isActive==true&&status=='2'}}">
<scroll-view scroll-y="true" class="posContainer">
<block wx:for="{{cur}}" data-index='index' wx:for-index='index' wx:key="index">
<view class="title">{{item.title}}</view>
<view class="poscontent">
<view wx:for="{{item.types}}" wx:for-item="type" wx:key='id' wx:for-index="{{index}}" data-index="{{index}}">
<view class="tag {{isSelect&&index==curIndex?'select':''}}" data-id="{{id}}" bindtap="multiSelect">{{type}}</view>
</view>
</view>
</block>
<view class="confirm">
<button class="weui-btn" type="warn">确认</button>
</view>
</scroll-view>
</block>
<block wx:if="{{isActive==true&&status=='3'}}">
<view class="orderContainer">
<view class="block">智能排序</view>
<view class="block">时间排序</view>
<view class="block">薪资排序</view>
</view>
</block>
<view class="listContainer" >
<view wx:for="{{jobList}}" wx:key="index" data-index="{{index}}">
<template is="list-item" data="{{...item}}" />
</view>
</view>
<view class="search " bindtap="search">
<image src="../../youzan-image/search.png" />
<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: