登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

微信小程序遮罩层快捷关闭实现与注意事项

发表在 2019-3-27 10:09 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 635

微信小程序遮罩层快捷关闭实现与注意事项

微信小程序遮罩层快捷关闭实现与注意事项


先以一张图片来展示功能需求

微信小程序遮罩层快捷关闭实现与注意事项

微信小程序遮罩层快捷关闭实现与注意事项

图中灰色透明区域点击可以关闭筛选框,而筛选框内白色区域点击是不能关闭筛选框的。
页面设计
遮罩层的设计是灰色透明区域包含白色区域,触发展示时,层级高于下方的列表层
代码设计
按微信小程序开发文档说明我们可以用到bindtap来指定触发事件,改变data的预设值,进而页面判断显示或隐藏遮罩层。
但是问题就出在bindtap的事件会出现事件冒泡,比如筛选条件项都绑定了记录选择筛选项的事件,点击选择筛选项的时候,会触发选择筛选项事件和关闭遮罩层的事件,造成不能持续选择筛选项和其他事件。
这时候,我们要在除了遮罩层使用bindtap来绑定事件外,其他绑定事件要使用catchtap关键字来绑定事件,这样就能阻止事件冒泡。
最好要在白色主面板区域用catchtap绑定一个空的事件处理函数,这样点击白色区域就不会触发关闭了,统一阻止了触发关闭遮罩层


扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴