评论

解决遮罩层的防触底思路,如果有更优解,欢迎大神补充。

弹出层 遮罩层 防触底处理

一、场景

一般来说,在写程序涉及到弹出层的时候,一般都会做防触底处理的。就比如这样的弹出层:


二、问题

一般来说呢,只需要给遮罩层设置 catchtouchmove 即可解决。

但是这样有弊端,假如弹框内容不可滚动,不会有太大问题,

假如当弹出层内容较多,并且可以滚动的时候,问题就会比较严重,

触摸弹出框内没有滚动的区域就会发现,滚动可以穿透,并且传递给底层的列表页面。

下面是我踩过的坑:

因为我的弹出层是三级联动菜单,有滚动列表。所以无法直接设置 catchtouchmove


三、解决方案

通过反复研究我们公司的小程序还有网上的商城红包demo:


首先,弹出层与遮罩层通过按钮触发。

然后设置弹出层的样式,并且将遮罩层的样式设置为满屏

width: 100%; 
height: 100%; 
position:fixed;

且遮罩层的z-index要低于弹出层,保证弹出层可以正常展示,不会被遮盖!

最后,将弹出层、遮罩层均设置 catchtouchmove,使其无法触底。再将弹出层内可滚动区域的view修改为scroll-view。

至于希望水平滚动还是垂直滚动,看自己需求设置即可。

至此,大功告成。目前在iOS与安卓系统上进行了简单测试,均未出现触底以及底部列表位置发生改变的情况。

因为苹果手机录屏没有触摸点,成品录下来也看不出效果,所以这个环节就省略了。


四、尾声

好了,本文没有写什么代码,只是分享一个解题思路,希望对大家有用。欢迎大神修正补充,问题探讨也可以私信我。

Ending........

最后一次编辑于  09-08  
点赞 1
收藏
评论

3 个评论

  • 刘玉川
    刘玉川
    星期一 19:13

    老哥 我这个弹出层无法滚动 一直在触发父节点的catchtouchmove事件

    星期一 19:13
    赞同
    回复 1
  • wang li
    wang li
    09-10

    不懂就问,什么是触底

    09-10
    赞同
    回复 1
  • 谋谋谋
    谋谋谋
    09-09

    感谢分享 虽然我早会了

    09-09
    赞同
    回复
登录 后发表内容