【uniapp】禁止遮罩层下的页面滚动解决办法

您所在的位置:网站首页 如何阻止页面弹窗设置 【uniapp】禁止遮罩层下的页面滚动解决办法

【uniapp】禁止遮罩层下的页面滚动解决办法

2024-07-17 05:52| 来源: 网络整理| 查看: 265

【uniapp】禁止遮罩层下的页面滚动解决办法

不少朋友在日常工作中都会遇到需要自定义弹窗的时候,当开启弹窗后,却发现存在弹窗下的页面依旧可以被触发滚动的问题,以下是相关的解决方法。

可用方法(不推荐):最外层 view 设置 height 和 overflow

根据是否打开的弹窗状态,对最外层 view 设置 height 和 overflow:

这个方法通过对页面设置高度来限制底层页面滚动的问题,但这个方法有个缺陷:页面会回到顶部,并且下面的样式会向上面挤压。因此并不是很推荐这个方法。

可用方法(不是很推荐):catchtouchmove='moveHandle'

这个方法很独特,它并不能直接在官方文档里面搜到,具体原因可以看这篇:catchtouchmove这个具体是做什么的?

它其实和官方推荐的方法(下一个方法)是一样的原理,通过阻止冒泡来实现禁止滑动的效果:

// js 触发的函数 catchTouchMove: function() { return false; },

尽管这个方法可以生效,但触发函数时会莫名生成一堆警告,所以也并不是很推荐这个方法。

可用方法(推荐):@touchmove.stop.prevent="moveHandle"

这个方法也是官方推荐的方法:介绍 | uniapp 官网

若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了,虽然在编译器上的滚轮依旧可以滚动,但真机环境下的手指滑动无法再触发。

// js 触发的函数:置空即可 moveHandle: function() {},


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3