uniapp-禁止滚动穿透

最新推荐文章于 2024-08-13 15:04:37 发布
最新推荐文章于 2024-08-13 15:04:37 发布
阅读量1.5k 收藏 4
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52852561/article/details/124351495
版权

哈喽小伙伴们~今天写uniapp开发的小程序,遇到一个问题 自己手动写了蒙版和小弹窗,小弹窗里的不支持销售的商品是可以滚动的,但是也会触发外部的滚动效果
在这里插入图片描述

网上找了挺多方法,都不可.于是,我尝试 在最外层的view标签 采用三元表达式,如果maskBool(蒙版)是开启的状态,使用 control-scroll 这个类名

<view :class="maskBool? 'order-submission control-scroll':'order-submission '">内容</view>

.control-scroll{ height: 100vh; overflow-y: hidden; }

以上就是我小小分享哈~

陈十三13
关注
uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）
Syleapn的博客
10-30 1万+
在uni-app中，弹窗的用途很常见，比如商品规格选取、广告弹窗等。在实际开发中，有时候我们需要在页面中有这样一个弹窗，但弹窗会导致触摸穿透的问题。这样带来的效果很不好，所以，在进行手动滑动时，我们需要在弹窗弹出后禁止原页面继续滚动。 一、解决触摸穿透的方法： 在网上看到最多用的方法是：在最外层的view上添加如下代码： <view class="" @touchmove...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序中处理这些问题。 ### 1. 滚动穿透（Scroll Through） 滚动穿透通常发生在弹窗或半...
uniapp阻止遮罩滚动穿透
wilL-my的博客
10-21 4181
<view class="mask" @touchmove.stop.prevent="moveHandle"> ------------------------------------------------------------ methods:{ moveHandle(){ return }, }
uniapp阻止遮罩层穿透滚动
前端-CV全粘工程师
09-23 619
uniapp 弹窗穿透 阻止弹窗后的列表滚动，阻止遮罩层后的列表滚动，阻止穿透
uniapp uview 2.x 解决u-popup 滚动穿透
最新发布
m0_50307759的博客
08-13 181
【代码】uniapp uview 2.x 解决u-popup 滚动穿透。
uni 防止滚动穿透
weixin_42212220的博客
05-11 331
场景：设置遮罩层或者弹窗的时候经常会遇到底层页面会跟着滑动的情况，把page-meta设置在最外层就可以了，等遮罩层弹出的时候就阻止了下层页面的滚动。
uni-app实现禁止弹出框滚动穿透
qq_31647491的博客
10-14 3534
在uni-app开发中，经常会使用弹出框、遮罩层以及日期选择器等组件，但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这可能会影响用户体验。
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app/h5适用
weixin_44805839的博客
07-04 1万+
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app适用
微信小程序，uni-app阻止滚动事件或悬浮按钮拖动事件穿透（事件穿透）
热门推荐
云间月
09-10 1万+
微信小程序，uni-app阻止滚动事件或悬浮按钮拖动事件穿透（事件穿透） 阻止滚动事件穿透的应用场景 **【场景一】**在开发中遇到这样一个需求，在页面中添加一个仿苹果的拖动悬浮按钮，但是在长页面中，当拖动悬浮按钮时，长页面也会随之滚动。因此需要组织悬浮按钮上的touchmove事件穿透。 **【场景二】**有时候我们需要在页面中弹出一个弹窗，在弹窗弹出后需要禁止原页面继续滚动。 阻止滚动事件穿透...
uniapp防止滑动穿透
weixin_42292991的博客
04-23 1万+
在我们使用弹出层的时候，上下滑动总能使背景页滑动。 因此我们可以通过弹出层的最外层代码加上@touchmove.stop.prevent="moveStop"来禁止滑动moveStop是一个空函数，什么也不需要写 ...
禁止穿透 uniapp
weixin_43978427的博客
10-15 1471
@touchmove.stop.prevent="() => {}"
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
vue中移动端禁止页面滚动
01-20
// 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')[0].style.cssText = cssStr document....
uniapp H5的弹窗滚动穿透解决
每天都要努力学习哦~~
04-22 2018
有一层遮罩蒙层覆盖在body上时，当我们滚动，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
uniapp禁止滑动防止滑动穿透
qq_37363320的博客
11-11 3458
在我们使用弹出层的时候，上下滑动总能使背景页滑动。 因此我们可以通过弹出层的最外层代码加上@touchmove.stop.prevent="moveStop"来禁止滑动 moveStop是一个空函数，什么也不需要写
uniapp中防止事件穿透
qq_34736893的博客
04-11 612
【代码】uniapp中防止事件穿透。
uniapp scroll view 解决高度自适应、弹框滚动穿透等问题。
wcdunf的博客
06-30 4023
在uniapp中scroll view 需要给固定高度，根据不同手机高度不一样，scroll view高度不相同，uniapp中不能进行dom操作，如何让scroll view适应不同手机高度，计算好高度如何给scroll view 设置高度呢通过uni.getSystemInfoSync()获取窗口宽度和高度动态设置 scroll-view 高度 :style动态绑定height高度打印uni.getSystemInfoSync() 这里获得的高度是物理高度px 如何转成rpx 在cumputed计算属性
uniapp 蒙层滚动穿透
qq_42628556的博客
05-16 254
我在底层页面用了一个scroll-view，然后弹出一个蒙层 但是怎么搞都一直能滚动底层页面，后面搞了半天我最后是给scroll-view设置了个样式 height: 100vh;
uniapp 穿透滚动问题
my bolg
05-10 550
uni-ui官方说明：https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-app。uni-ui和vant weapp都可以用同样的方法###本人开发小程序用的内置的uni-ui，同时也用过vant为小程序提供的vant weapp的UI库，但是他们两个在用popup会出现同样的问题，就是穿透滚动问题，这个时候就需要官方提供的page-meta标签，
u-picker滚动穿透
06-01
如果您想要在使用 u-picker 组件时避免滚动穿透的问题，可以尝试以下方法： 1. 在打开 u-picker 组件之前，禁用页面的滚动条。可以使用以下 CSS 代码实现： ``` body { overflow: hidden; } ``` 2. 在关闭 u-picker 组件时，恢复页面的滚动条。可以使用以下代码实现： ``` body { overflow: auto; } ``` 3. 如果您使用的是 u-picker 的插件版本，可以查看插件的文档，看是否有提供解决滚动穿透的选项。 希望以上方法能够帮到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值