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禁止遮罩层页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Js中parentNode,parentElement,childNodes,children之间的区别
这篇文章主要是对Js中parentNode,parentElement,childNodes,children的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了JavaScript Canvas绘制动态线框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
web的打印方法具我自己懂得知道的有：JQuery插件Jqprint实现;JQery打印插件PrintArea实现网页打印;CSS控制网页打印样式,本文详细介绍实现步骤，感兴趣的朋友可以了解下2013-01-01
本篇文章给大家介绍js判断蜘蛛来源的方法，此方法的脚本是写在body的onload里面的，当页面进行加载时就进行判断，感兴趣的朋友一起看看吧2015-09-09
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
在使用easyUI做前端样式展示时，遇到了文件上传的问题，而且是在弹出层中提交表单，想做到不刷新页面，所以选择了使用ajaxFileUpload插件。下面通过本文给大家分享springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项，需要的朋友参考下吧2017-04-04
下面小编就为大家带来一篇老生常谈Javascript中的原型和this指针。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-10-10
枚举是一种数据结构，它定义了一个有限的具名常量集，每个常量都可以通过其名称来访问，这篇文章主要介绍了JavaScript中的四种枚举方式,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JS实现自适应高度表单文本框的方法,实例分析了针对IE内核与非IE内核下的javascript控制文本框样式的技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JavaScript实现的简单Tab点击切换功能,涉及JavaScript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-07-07
本文是司徒正美的《javascript框架设计》的第三章第一节的读书笔记，简单介绍了javascript字符串的扩展和修复，小伙伴们参考下吧2014-12-12
最新评论