uniapp遮罩层禁止下面页面上下滑动

转载 已于 2023-11-23 16:23:01 修改 · 498 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.miyil.com/uniapp/1207.html
文章标签：

#前端

于 2023-11-23 16:15:12 首次发布
本文介绍了在uniapp开发中如何通过`.touchmove.stop.prevent`简单阻止遮罩层下页面的滑动，避免因使用级联组件导致的错误，提供了一种高效且不会引发额外问题的解决方案。
LifeFuture1994
关注
uniapp小程序禁止遮罩弹窗下的页面滚动的办法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
08-16 389
在使用uniapp开发小程序时，弹窗遮罩层弹出时，常常遇到一个问题：页面内容仍然可以滚动，导致弹窗体验不好。特别是在弹窗遮罩出现时，用户意外滑动页面会造成页面和弹窗重叠，影响用户体验。本文分享一个简单实用的方法，教你如何通过事件捕获和样式控制，实现小程序弹窗遮罩层出现时，禁止底层页面滚动，提升用户体验。小程序中禁止遮罩弹窗下页面滚动，关键是阻止遮罩层touchmove事件冒泡和默认行为。结合动态设置外层容器，限制页面高度，避免页面整体滚动。
uniapp使用u-popup组件弹窗出现页面还可滑动
weixin_53339757的博客
01-31 4051
解决u-popup出现遮罩层页面滑动问题
We前端之UniApp禁止遮罩弹窗下的页面跟随滚动、彻底解决小程序滚动穿透问题、微信小程序、滑动、穿透
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
07-27 2704
We前端之UniApp禁止遮罩弹窗下的页面跟随滚动、彻底解决小程序滚动穿透问题、微信小程序、滑动、穿透
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 3万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
JavaScript中防止微信浏览器被整体拖动的方法
12-09
在微信网页开发中，我使用的页面结构是在body下的container覆盖全屏，container下有个header和page的容器，page负责显示所有内容并实现滚动。 结构如图：  但是遇到了一个问题：在页面已经滚动到顶部时，继续往下拖动page容器，会将微信浏览器整体往下拖，漏出“该网页由XXX提供”的提示，然后在安卓下，影响并不大，但是在iphone下，就没那么简单了，经过测试，在苹果下，往下拖动后快速滑动页面中的page，page并不会滚动，上拖同样遇到了这个问题，非常影响体验。 查阅文献后，我准备在touchstart和touchmove上做些处理。 思路是当page页面滚动到顶
uniapp 遮罩层下内容禁止滚动
significant_的博客
02-15 1973
背景的新闻内容仍然可以滚动 （逻辑上应该是遮住的内容就无法滚动了）
uni-app 弹出层uni-popup的实现以及禁止遮盖层页下的页面滑动
weixin_60363448的博客
10-19 3332
提示：最近入职新公司负责小程序的研发，小程序是用uni-app研发的。中间有这样一个场景：点击“案例详情” 弹框展示案例内容。但是这个时候用户滑动弹框内部的内容的时候，遮盖层页面也会跟着滑动。查看uni-app 官网提示说现在前端存在这样的问题，需要用户自己想办法解决。于是就有了这篇博客。@touchend="end" 手指离开屏幕时触发的事件@touchmove="move" 手指在屏幕上移动时触发的事件。
vue解决弹出蒙层滑动穿透问题的方法
10-17
这个指令可以直接阻止滑动事件，但它会禁止所有内部元素的滑动事件，包括蒙层内部文字的上下滑动。这种方法适用于不需要内部滑动的场景。 第二种思路是将蒙层设置为fixed样式，并固定在最上方。同时，将底部列表的...
【uniapp】禁止页面上下滚动
y_coder的博客
10-30 5498
则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在。属性控制，该属性默认为。
uniapp 禁止遮罩层下的页面滚动
UserGuan的博客
08-23 2239
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了，虽然在编译器上的滚轮依旧可以滚动，但真机环境下的手指滑动无法再触发。注意：如果使用 uview 之类的 ui 框架，@touchmove.stop.prevent 必须放在底层的 view 上面。
uniapp中禁止自定义遮罩层下页面滑动
Wjhwjhai的博客
05-31 929
首先介绍我的业务场景，页面最上边是一个搜索框，下边是三个系列筛选框，点击在筛选框下出现弹窗和遮罩层。整体功能还是实现了的，但是当遮罩层出现的时候，上下滑动，页面还是会滚动。不少朋友在日常工作中都会遇到需要自定义弹窗的时候，当开启弹窗后，却发现存在弹窗下的页面依旧可以被触发滚动的问题，以下是相关的解决方法。在遮罩层中添加@touchmove.stop.prevent="moveHandle"，这也是官网推荐的，
uniapp禁止上下滑动
qq_48881427的博客
12-22 1099
uniapp
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）
记笔记
08-16 3220
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）在微信小程序、App 平台，页面内需要特殊处理一下滚动穿透，在页面顶部添加一个page-meta组件动态修改页面样式。
uniapp：禁止蒙版下的页面滚动
彭世瑜的博客
04-05 518
【代码】uniapp：禁止蒙版下的页面滚动。
uni-app 禁止页面上下滚动的方法
qq_37746495的博客
03-21 8109
uni-app 禁止页面上下滚动的方法
在UniApp中防止页面上下拖动的方法
Yzfeng21的博客
07-17 545
2、 pages.json中在所有页面设置禁用弹性滚动的页面。1、pages.json中在某个页面设置禁用弹性滚动的页面。
uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件
qq_42682622的博客
03-24 6394
当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。
uniapp当页面高度设置100vh的时候。怎么让他禁止上下滚动
weixin_45721912的博客
02-13 1001
禁止页面上下滑动
uni 防止滚动穿透
weixin_42212220的博客
05-11 725
场景：设置遮罩层或者弹窗的时候经常会遇到底层页面会跟着滑动的情况，把page-meta设置在最外层就可以了，等遮罩层弹出的时候就阻止了下层页面的滚动。
uniapp开发小程序时禁止页面上下滑动
最新发布
11-20
在使用 UniApp 开发小程序时，若要**禁止页面的上下滑动**，本质是控制页面的滚动行为。这通常适用于某些全屏展示场景（如弹窗、引导页、锁定屏幕方向等），防止用户通过滑动影响界面布局或触发不必要的滚动。 --- ### ✅ 解决方法： #### 方法一：在页面的 `style` 中设置 `overflow: hidden` 通过 CSS 控制页面根元素不显示滚动条并禁止滚动。 ```vue <template> <view class="container"> <!-- 页面内容 --> <text>这是一个不能上下滑动的页面</text> </view> </template> <script> export default { // 页面生命周期 onLoad() { // 可选：动态设置页面样式 } } </script> <style scoped> /* 禁止页面滚动 */ .container { height: 100vh; overflow: hidden; /* 或者使用 fixed 布局防止滚动穿透 */ } </style> ``` > 💡 注意：`.container` 必须撑满整个视口，并且设置 `overflow: hidden` 才能生效。 --- #### 方法二：使用小程序原生配置 `disableScroll: true`（推荐） UniApp 支持在页面的 `json` 配置中通过 `disableScroll` 字段来禁止页面滚动。 在对应页面的 `pages.json` 中进行如下配置： ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "disableScroll": true } } ``` > 🔔 `disableScroll: true` 是小程序平台特有功能，在微信小程序中有效，表示整个页面不允许滚动。当设置为 `true` 时，页面节点超过一屏也不会被允许滚动。 --- #### 方法三：动态控制是否可滚动（JS 控制） 你也可以通过调用小程序原生 API 动态设置滚动开关（仅支持微信小程序）： ```javascript // 启用/禁用页面滚动 uni.pageScrollTo({ scrollTop: 0, duration: 0 }); // 并结合 disableScroll 静态配置或使用 hideScrollbar ``` 或者在 `onLoad` 中设置： ```vue <script> export default { onLoad() { // 禁止滚动（需配合 DOM 结构） this.$nextTick(() => { uni.hideScrollbar(); // H5 和小程序部分版本支持，非标准 API }); } } </script> ``` ⚠️ 注意：`uni.hideScrollbar()` 并不是所有平台都支持，建议优先使用 `disableScroll`。 --- ### ❗问题产生的原因： 1. **默认页面可滚动** 小程序页面如果内容高度超出屏幕，默认允许用户上下滑动查看全部内容。 2. **交互需求限制** 某些页面（如启动页、游戏界面、全屏轮播）需要固定视图，禁止用户滑动，否则会破坏 UI 体验。 3. **滚动穿透问题** 在弹出层出现时，底层页面仍可能响应滑动事件，导致“滚动穿透”。 --- ### ✅ 最佳实践建议： - 使用 `disableScroll: true` 是最直接、高效的方式，适用于静态页面。 - 若页面内部需要局部滚动，而整体不可滚动，请将内容包裹在固定高度容器内并设置 `overflow-y: auto`。 - 避免使用 `body { height: 100vh; overflow: hidden }` 这类全局样式，容易引发兼容性问题。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值