uniapp禁止遮罩层下页面滚动的解决方法

更新时间：2023年09月06日 08:34:12 作者：Brod_Roy

在uniapp的开发中用过弹窗的都知道有个bug就是滑动弹窗的内容底部页面也会跟着滑动,所以这篇文章主要给大家介绍了关于uniapp禁止遮罩层下页面滚动的解决方法,需要的朋友可以参考下

可用方法（不推荐）：最外层 view 设置 height 和 overflow

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

<!-- 页面 view -->
<view :style="{height:isOpenCheck?'100vh':'',overflow:isOpenCheck?'hidden':''}"></view>

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

可用方法（不是很推荐）：catchtouchmove='moveHandle'

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

它其实和官方推荐的方法（下一个方法）是一样的原理，通过阻止冒泡来实现禁止滑动的效果：

<!-- 弹窗 view -->
<view v-if="isOpenCheck" class="date-bg" catchtouchmove="catchTouchMove"></view>

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

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

可用方法（推荐）：@touchmove.stop.prevent="moveHandle"

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

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

<!-- 弹窗 view -->
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

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

总结

到此这篇关于uniapp禁止遮罩层下页面滚动的解决方法的文章就介绍到这了,更多相关uniapp禁止遮罩层页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

小程序模实现糊搜索功能
这篇文章主要为大家详细介绍了小程序模实现糊搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
使用纯前端JavaScript实现Excel导入导出方法过程详解
这篇文章主要介绍了使用纯前端JavaScript实现Excel导入导出方法过程详解，文章通过示例代码和图文解析介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
通过js控制修改css变量的具体示例
在网页开发中我们通常使用CSS来设置网页的样式,但是,在开发过程中,有时候我们需要根据不同的条件来动态修改样式,这篇文章主要介绍了通过js控制修改css变量的具体示例,需要的朋友可以参考下
2025-04-04
js结合css实现登录后才能复制的效果实例
很多网站都有登录后才能复制的限制，什么原理呢？css属性user-select:none，通常会采用这种方式来禁止复制文本。但浏览开发者工具-审查元素，取消此样式后，就可以选中文本了。想要完整地禁止复制，还需要通过js控制选择的内容。
2023-07-07
纯js实现背景图片切换效果代码
现在纯粹用js的人越来越少了，更多的人喜欢jquery，可使我还是喜欢javascript，下面给出一个用javascript写的背景切换的小例子，各位大虾不要骂，只是写给自己看的，也供js事件的产考依据。
2010-11-11
js阻止浏览器默认行为触发的通用方法(推荐)
下面小编就为大家带来一篇js阻止浏览器默认行为触发的通用方法(推荐)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
Javascript ES6中对象类型Sets的介绍与使用详解
这篇文章主要给大家介绍了关于Javascript ES6中Sets的介绍与使用的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-07-07
ionic2自定义cordova插件开发以及使用（Android）
这篇文章主要为大家详细介绍了ionic2自定义cordova插件开发以及使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JS实现头条新闻的经典轮播图效果示例
这篇文章主要介绍了JS实现头条新闻的经典轮播图效果,涉及javascript图片轮播切换相关实现技巧,需要的朋友可以参考下
2019-01-01
JavaScript垃圾回收与闭包举例详解
闭包和垃圾回收机制常常作为前端学习开发中的难点,也经常在面试中遇到这样的问题,这篇文章主要介绍了JavaScript垃圾回收与闭包的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-04-04