小程序开发做弹出菜单功能(附代码)(微信小程序自定义弹出框)

这次我给大家带来的是小程序开发的弹出菜单功能(附代码)。有哪些注意事项？以下是实际案例。让我们看一看。

要求

点击标签按钮弹出菜单。再次单击以检索菜单。

有待解决的问题

三列标签样式，标签列是固定的；

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

掩码优先级在弹出框下面；

弹出框中标签的设置；

滚动条的隐藏

怎么解决？

布局灵活，横向，三者平分整个栏目；

通过状态监控点击事件，通过数据控制隐藏或显示，通过rgba设置透明度。

弹出框设置Z-索引；；

灵活布局flex水平排列超出后绕，然后周围的space -控制间距。

* -WebKit -scroll bar { width:0；高度:0；颜色:透明；}具体实施

wxml

& lt导入src = & quot../../templates/template & quot；/& gt；& ltview class = & quot容器{{isMask？'面具& # 039；:''} } & quot& gt& ltview class = & quot标题& quot& gt& ltview class = & quotfilterCity { { status = = & # 0391'& amp& ampisActive？'主动& # 039；:''} } & quotdata -status = & # 039；1'bindtap = & quot更改状态& quot& gt& ltview class = & quot城市& quot& gt城市筛选

page { position:relative；宽度:100%；身高:100vh}.页眉{宽度:100%；身高:80rpx位置:固定；top:0；显示器:flexflex -方向:rowjustify -内容:space -之间；text-align:居中；颜色:# 313131；font -大小:16pxborder -bottom:1 rpx solid # eeeeee；Z-指数:9999；background -颜色:# fff}.filter city { flex:1；位置:相对；身高:80rpxline -高度:80rpx}.filterJob {位置:相对；flex:1；身高:80rpxline -高度:80rpx}.filterOrder { position:相对；flex:1；身高:80rpxline -高度:80rpx}.标题图像{位置:绝对；右:15rpx顶配:26rpx宽度:30rpx高度:30rpx}.活动{ color:# ef 0001；}.遮罩{宽度:100%；身高:100%；位置:固定；顶配:80rpxbackground-color: rgba(15，15，26，0.3)；}.cityContainer {显示:flexflex -方向:rowjustify -内容:space -左右；align -items:space -between；flex -wrap:wrap；宽度:100%；身高:300rpxZ-指数:999；background -颜色:# fffborder -bottom:1 rpx solid # e9e 9e 9；padding -bottom:130 rpx；}.城市集装箱。城市{显示:街区；font -size:15px；margin -top:100 rpx；宽度:150rpx高度:50rpxline -高度:50rpxtext-align:居中；边框:1rpx实心# e9e9e9溢出:隐藏；}.选择{ color:# ffffff；background -color:# ed 0000；}.pos container { height:980 rpx；宽度:100%；background -颜色:# fff/*溢出:自动；*/}::-WebKit -scroll bar { width:0；高度:0；颜色:透明；}.title { margin -top:55 rpx；font -size:15px；margin -left:28 rpx；}.pos content { width:100%；显示器:flexflex -方向:rowjustify -内容:flex -start；flex -wrap:wrap；margin -top:-15 rpx；}.tag { margin -left:28 rpx；margin -top:23r px；font -size:13px；宽度:150rpx高度:50rpxline -高度:50rpxtext-align:居中；边框:1rpx实心# e9e9e9}.确认{宽度:100%；身高:150rpx边框:1rpx纯色透明；background -颜色:# fff}.weui-btn {位置:固定；宽度:95%；底部:52rpx左:50%；transform:translate x(-50%)；}.订单容器{ display:flex；flex -方向:rowjustify -内容:space -左右；align -项:居中；background -颜色:# fff宽度:100%；身高:125rpx}.block { font -size:13px；宽度:200rpx高度:50rpxline -高度:50rpxtext-align:居中；边框:1rpx实心# e9e9e9}.搜索{位置:固定；底部:80rpxbackground -颜色:# fff右:25rpx宽度:150rpx身高:75rpxline -身高:75rpxtext-align:居中；border -半径:35rpxbox -暗影:1 rpx 1 rpx 7 rpx 7 rpx # f5f 5 f 5；}.搜索图像{ width:30 rpx；高度:30rpx}.搜索文本{ font -size:15px；padding -left:9 rpx；颜色:# 666666；}.list container { width:100%；身高:100%；margin -top:80 rpx；}js

从& # 039；导入类别；../../API/employ & # 039；从& # 039；导入作业列表；../../API/detail & # 039；page({ data:{ curIndex:& # 039；'，isActive: false，jobList:[]，cur: []，job: []，isShow: true，status: 0，isMask: false，isSelect: false，city:[& # 039；整个国家& # 039；, '杭州& # 039；, '北京& # 039；, '深圳& # 039；, '上海& # 039；, '广州& # 039；, '武汉& # 039；, '重庆& # 039；] }，changeStatus(e){ let status = e . current target . dataset . status；设cur = categorythis.setData({ isActive:！this.data.isActive，status: status，isMask:！this.data.isMask，cur: cur，}) }，select(e){ let curIndex = e . current target . dataset . index；this . setdata({ is select:& quot；curIndex == this.data.curIndex？'！this . data . is active & # 039；: '真& # 039；"，isActive: false，isMask:false，curIndex: curIndex，}) }，multiSelect(e){ let multi index = e . current target . dataset . index；this.setData({ isSelect:！this.data.isSelect，curIndex:multiIndex }) }，search(e){ wx . navigate to({ URL:& # 039；../search/search & # 039；，}) }，onLoad:function(e){ this . setdata({ job list:job list })}，click:function(e){ let id = e . current target . dataset . id；wx . navigate to({ URL:` 0../细节/细节？ID = $ {ID} `，}}})相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

角度过滤器进行数据案例转换。

Vue制作一个按钮组件。