微信小程序实现弹出菜单功能_微信小程序点击按钮出现弹窗 - CSDN文库

1.3k 浏览量更新于2023-05-26 评论收藏 86KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

需求需求

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

要解决的问题要解决的问题

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

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

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

弹出框内标签的设置；

滚动栏滚动条的隐藏

如何解决？如何解决？

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

状态监听点击事件，数据控制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">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论0

weixin_38625184

粉丝: 4
资源: 948

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈