情况:如果在原生组件上,搞了一些弹窗、覆盖层、操作栏等等的东西,有层级的情况,就会出现事件穿透的问题
问题:自然会想到官方给出的解决方案:使用cover-view。但有时穿透问题虽然解决了,但会出现各种新的问题,icon失效、text消失、层级过高、超出范围的元素会被隐藏,border异常...等等
经过一系列研究,总结出几个有效的方法,记录一下:
一、使用cover-view和cover-image (建议最后再考虑这个方法)
首先,如果是用view等标签写好的组件,发现了问题,那么建议最后再考虑使用cover-view和cover-image,为什么?因为此项改造成本巨大:
- 需要将所有的view转换成cover-view,
- 所有的text都要包裹上cover-view,
- 所有的icon图标都得废弃并改造成cover-image使用图片代替,
- 单边的border-radius也会失效,这个改起来更麻烦
- cover-view在应用中的层级最高,并且无法调整
- 以上5点的改造,通常要伴随着css代码改动,js逻辑改动
如果是一个复杂的组件,以上这几点的改造成本,测试成本,相当高。
二、使用uni-popup 弹出层
推荐,这个很灵活,虽然大多用来做弹窗,但是可以关闭遮罩层,取消点击遮罩层事件。用来代替cover-view,并且这东西没有太多的限制和坑,里面照样用view,用image,用icon等等,如果是已经开发好的组件修改,代码都不需要太多改动。
唯一的问题就是,要解决滚动穿透/点击穿透,一行代码就能搞定
这个官方文档中也有说到,亲测好用,这个会把滚动穿透、点击穿透,同时解决。