uniapp 自定义弹窗弹出后禁止页面滚动

最新推荐文章于 2024-06-25 11:16:18 发布
最新推荐文章于 2024-06-25 11:16:18 发布
阅读量725 收藏 1
点赞数
分类专栏： uniapp开发 文章标签： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42249532/article/details/134076166
版权

弹窗弹出后，禁止页面内容滚动，可以使用在蒙层上使用@touchmove.stop.prevent="moveHandle"

在PC端浏览器移动设备模式调试时，鼠标滑轮依然可以滚动，鼠标拖拽上划就无法滚动

南风知我意zz
关注
专栏目录
uniapp - [全端兼容] 气泡菜单弹框组件，支持弹出框自动定位、插槽内容、对定位位置不满意可自行调控、是否开启遮罩层、弹出位置、小三角样式等（类似微信首页点击 + 号弹出的气泡菜单效果功能）
王佳斌
07-12 6264
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，气泡列表，汽泡菜单，气泡框，泡泡框，悬浮框，悬浮菜单，点击菜单按钮弹出气泡，对话箭头气泡框，弹出的气泡准确定位并吸附在附近，弹出式气泡，弹窗菜单，气泡自定义HTML弹窗，带三角的气泡弹框，三角气泡框里面嵌套菜单，当点击一个按钮或元素时，会从附近弹出一个小气泡一样的菜单列表，自定义气泡框内的内容，点击一个元素在附近弹出一个气泡弹框功能效果，气泡弹框不准怎么办，被盖住了，组件插件，自定义气泡菜单组件，气泡
uniapp小程序禁止遮罩弹窗下页面滚动的办法
努力、拼搏、奋进
03-30 509
uniapp小程序禁止遮罩弹窗下页面滚动的办法
uniapp弹窗之后禁止页面滑动
weixin_52941842的博客
05-31 3797
uniapp弹窗之后禁止页面滑动
解决uni-popup禁止滚动穿透
最新发布
limmt2020的博客
06-25 815
此样式表示取消区域触摸动作。在弹框内容页面中修改样式。
解决uniapp 使用打开弹窗后，滚动屏幕，背后的内容也会滚动
qq_52177667的博客
09-14 2930
uniapp
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app/h5适用
weixin_44805839的博客
07-04 1万+
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app适用
vue/uniapp 动态禁止页面滚动(h5)
乔的博客
02-16 1749
弹框时，底部会跟随滑动，用户体验不佳。原理简单，就是常用的css 来控制。
We前端之UniApp禁止遮罩弹窗下的页面滚动
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
07-27 1884
We前端之UniApp禁止遮罩弹窗下的页面滚动
uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）
Syleapn的博客
10-30 1万+
在uni-app中，弹窗的用途很常见，比如商品规格选取、广告弹窗等。在实际开发中，有时候我们需要在页面中有这样一个弹窗，但弹窗会导致触摸穿透的问题。这样带来的效果很不好，所以，在进行手动滑动时，我们需要在弹窗弹出后禁止原页面继续滚动。 一、解决触摸穿透的方法： 在网上看到最多用的方法是：在最外层的view上添加如下代码： <view class="" @touchmove...
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同，需要特定的...
微信小程序弹出层，右上角关闭按钮
07-14
4. **交互逻辑**：为了让弹出层不响应上拉和下拉操作，可以在页面的生命周期函数`onReachBottom`和`onPullDownRefresh`中进行处理，避免触发滚动事件。此外，可以通过CSS设置`touch-action: none`来防止触摸事件。 ...
uniapp - [全端兼容] 详细实现多选弹框选择器，弹框形式的列表多选选择器组件插件（底部弹框式列表多选功能，支持数据回显、动态数据、主题色等配置），提供详细示例代码，一键复制运行即可！
王佳斌
07-04 4139
uniapp小程序 H5网页 安卓苹果app端列表多选功能，uniapp弹框多选插件，uniapp多选弹框组件，uniapp多选弹框组件，uniapp select 多选选择器，uniapp多项选择器，uniapp可以多选的弹框组件，uniapp弹框内可以多选的功能插件，uniapp可以选择多个值的选择器，同时又可以单选和全选，uniapp多选下拉框，uni-app 实现列表数据选中多个功能，uniapp 列表多选如何回显数据，uniapp多选怎么回显数据，下拉选择框，uniapp 弹框式列表多选，unia
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）
记笔记
08-16 2164
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）在微信小程序、App 平台，页面内需要特殊处理一下滚动穿透，在页面顶部添加一个page-meta组件动态修改页面样式。
uniapp 禁止动态禁止页面上下滚动
wangongchao的博客
08-09 2040
现在有个需求是在当前页面添加可拖拽的悬浮球，但是页面长度太长，当拖拽的时候，球和页面一起滚动，很是苦恼，但是当页面没有滚动条的时候悬浮球是正常的，所以判断是页面太长，悬浮球计算了整个页面的高度来计算激动的，而不是可视区域，所以，有个思路，当手指触屏的时候把页面锁死，手指离开屏幕的时候解除限制，这样悬浮球可自行移动，页面不滚动，完美解决，废话不多说上代码。...
uni-app实现禁止弹出框滚动穿透
qq_31647491的博客
10-14 3533
在uni-app开发中，经常会使用弹出框、遮罩层以及日期选择器等组件，但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这可能会影响用户体验。
【uniapp】禁止页面上下滚动
y_coder的博客
10-30 3980
则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在。属性控制，该属性默认为。
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 2万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
uniapp小程序禁止遮罩弹窗下的页面滚动的完美解决办法
红星的专栏
05-12 1万+
问题 最近用uniapp开发一款APP，页面是可以滚动的长列表，自定义组件弹窗遮罩出来后，滑动屏幕底部还在滚动，研究了网上的解决办法： 在最外层的view中加入@touchmove.stop.prevent="moveHandle" 在最外层的view中加入@catchtouchmove="moveHandle" 我测试了一下这两个事件方法发现不太理想，会导致弹窗和底部页面都不能滚动了，或者处理不当就报一些其他错误，还是不太简便。 解决 又看了一下微信小程序官方技术给的介绍，其实这事浏览器的滚动穿透问题
uniapp——uniapp 禁止当前页面滚动
qq_43201350的博客
03-28 1599
uniapp——uniapp 禁止当前页面滚动
uniapp全局自定义弹窗
04-12
UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。在UniApp中，可以通过自定义组件来实现全局弹窗的功能。 要实现全局自定义弹窗，可以按照以下步骤进行操作： 1. 创建一个全局弹窗组件：在UniApp项目中创建一个自定义组件，用于显示弹窗的内容。可以使用Vue的模板语法和样式来定义弹窗的外观和交互效果。 2. 注册全局组件：在App.vue文件中，使用Vue的全局注册方法将弹窗组件注册为全局组件。这样，在整个应用程序中都可以使用该组件。 3. 弹窗触发事件：在需要显示弹窗的地方，通过触发事件的方式来显示弹窗。可以使用Vue的事件机制来实现。 4. 弹窗关闭事件：在弹窗组件中，定义一个关闭弹窗的方法，并在需要关闭弹窗的地方调用该方法。可以使用Vue的事件机制来实现。 5. 样式控制：通过CSS样式来控制弹窗的位置、大小、动画效果等。 6. 数据传递：如果需要在弹窗中显示动态数据，可以通过props属性将数据传递给弹窗组件。 以上是实现全局自定义弹窗的一般步骤，具体的实现方式可以根据项目需求和个人喜好进行调整和扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值