开发商城小程序有个需求，规格的选择采用view组件作弹层，当点view外部的区域可以关闭这个view弹层。
这个需求可以通过阻止冒泡来实现。
1. 在小程序的父容器view上设置bindtap事件。（mpvue对应为@tap)
2. 在子view，即弹层的view上设置catchtap事件就可以了。(mpvue对应为@tap.stopp)
参考文档：
上面介绍的方法可以实现需求，但参考京东、淘宝选择规格的弹层的关闭皆是借用遮罩层的方法去实现。大体方法是这样的：
1. 遮罩层view, 并加关闭的tap事件。css中设置top,left, 绝对定位、长宽100%及opacity=0.5、z-index、背景黑色
2. 弹层view(与遮罩层view是同级关系), z-index大于遮罩层的，宽100%,高设个比例，背景白色，绝对定位于下方
3. vue设个控制显示与隐藏的变量，
用阻止冒泡的方法实现 开发商城小程序有个需求，规格的选择采用view组件作弹层，当点view外部的区域可以关闭这个...
微信小程序弹框之cover-view 1: 最近商户端小程序有个需求涉及到textarea，在textarea上方...
微信小程序（MP, Mini Program）框架分为两层 视图层 View 逻辑层AppService 视图层 ...
微信小程序 text 标签，发现设置行高后无效。解决办法就是在外层嵌套多一层 view，然后在 view 的样式中...
view 是什么? view属于微信小程序的视图容器之一。在view中可以放各种组件，并且各个组件可以组合。 如何...
cover-view问题 给个微信官方文档的导航：微信小程序 cover-view，里面介绍的更加详细 cover...
基础组件 基础内容组件 表单组件 微信小程序伸缩布局 视图容器 view scroll-viewswiper-view
如图微信小程序中 scroll-view组件外div加display：flxed后， scroll-view组件滚...
微信小程序笔记 view 默认是 vertivalalign 默认是 水平排列
微信小程序 View 支持两种布局方式：Block 和 Flex，所有 View 默认都是 block浮动布局，要...
本文标题：微信小程序在view弹层外部关闭view
本文链接：https://www.haomeiwen.com/subject/yifxuhtx.html
网友评论