[清远seo公司方便久澳]小程序开发做出弹出菜单功能（附代码）

　　这次给大家带来小程序开发做出弹出菜单功能（附代码），小程序开发做出弹出菜单功能（的注意事项有哪些，下面就是实战案例，瑞金市小程序开发哪家好一起来看一下■•▪◆。[清远seo公司方便久澳]

需求

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

要解决的问题

1. 标签栏三栏样式■★◆◆，标签栏固定不动•○◇□；

   　　

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

   　　

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

   　　

4. 弹出框内标签的设置；

   　　

5. 滚动栏滚动条的隐藏

   　　

如何解决？

1. 弹性布局，横向，万宁市小程序制作公司三者平分整栏;

   　　

2. 状态监听点击事件，[七台河seo公司到久澳]微信小程序联网请求的轮播图，数据控制hide或者show,通过rgba设置透明度

   　　

3. 弹出框设置z-index；

   　　

4. 弹性布局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: 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}`,
 })
 }
})

　　相信看了本文案例你已经掌握了方法，更多精彩请关注久澳传媒编程栏目其它相关文章▷◁•！鸡西市小程序制作公司

　　推荐阅读：

　　Angular过滤器做出数据大小写转换
 

　　vue做一个按钮组件

　　以上就是小程序开发做出弹出菜单功能（附代码）的详细内容★○☆•，更多请关注久澳传媒编程栏目其它相关文章！