【滚动穿透】解决uview弹出层滚动穿透问题

最新推荐文章于 2024-06-07 10:05:45 发布
最新推荐文章于 2024-06-07 10:05:45 发布
阅读量680 收藏
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34093387/article/details/130100589
版权

在组件父级元素增加事件

@touchmove.stop.prevent=“” 

这里拿u-popup组件举例，找到u-popup根元素，在view加上事件 

<template>
    <view class="u-popup" @touchmove.stop.prevent="">

 

青阳zi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 弹框产生的滚动穿透问题的解决
01-21
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。 首先定义一个全局样式： .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件，定义几个方法： export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el
解决移动端滚动穿透问题
05-31
当用户在页面上触发一个弹出层（如模态对话框、下拉菜单或加载遮罩层）时，通常希望页面主体部分在此期间不可滚动，以防止意外的滚动行为影响交互。然而，如果不正确处理，用户仍可能在遮罩层存在时滚动到页面底部，...
uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透
weixin_45368519的博客
03-24 3261
近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
李十三的博客
07-25 1738
首先,这个情况是什么时候会出现?遮罩层出现的时候会出现,那么,我们就可以监听控制遮罩层或者包含遮罩层的那个组件的flag变量. 当遮罩层显示的时候,让当前页面的overflow变成hideen,在遮罩层隐藏的时候,设置当前页面的overflow为’'. 设置了overflow为hidden,页面滚动条都没了,我看你怎么滚动.
解决uView2.0 Picker 选择器 (u-datetime-picker) 背景滚动，页面穿透滚动的问题
最新发布
c05011510的博客
06-07 339
需要在 data 中定义一个变量，用来表示。的开启关闭状态，并通过这个变量修改。的开启关闭状态 ，并赋值给上面的变量。组件动态修改页面样式 ，
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 4362
uni-app、u-popup、遮罩滚动穿透
vue-解决弹出蒙层滑动穿透问题
asdfgh0077的博客
09-26 230
vue-解决弹出蒙层滑动穿透问题
解决uView2.0 Picker 选择器 (u-datetime-picker) 背景滚动，页面穿透的问题
gxdzi的博客
10-21 781
在组件的父级元素修改默认的事件。
vue解决弹出蒙层滑动穿透问题的方法
10-17
主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目移动端滚动穿透问题的实现
10-15
本文将详细介绍如何在Vue项目中解决移动端的滚动穿透问题。 首先，解决滚动穿透问题可以分为两种情况：上层无需滚动和上层需要滚动。 1. 上层无需滚动 当上层元素不需要滚动时，我们可以直接阻止上层元素的`...
今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
08-29
今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
vue弹层滑动穿透问题简单解决方案
weixin_38002190的博客
07-26 389
vue弹层滑动穿透问题简单解决方
h5 vue解决弹窗滑动穿透问题
为啥不能换名字的博客
09-10 543
1.在mian.js中引入prototype.js import Vue from 'vue'; //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动
uview组件的popup弹出层下页面可以滑动问题
qq_45300351的博客
12-02 1586
uview组件的popup弹出层下页面可以滑动
vue 在弹框中滑动会透传到下面的页面解决办法
liuye066的专栏
05-27 1300
VUE中，在一个页面打开弹框，在弹框中上下滑动，下方页面会跟着滑动。 解决办法： 在main.js中加入代码： //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面
完美解决VUX的popup组件滑动穿透的问题
weixin_30292745的博客
09-19 1232
　　最近使用vux的popup组件做个弹窗，在真机中使用发现存在滑动穿透的问题，即在弹出窗滑动内容，底层的内容也会跟着滑动，这种体验很不好。 　　废话不多说，直接上解决方法： 　　核心就是给根div添加固定定位。 　　具体实现如下: <template> <div id='discounts' :class="{'fixed-touch':showDetail}...
uniapp 微信小程序和H5的弹窗滚动穿透解决
热门推荐
坐等夕阳落time的博客
10-17 1万+
uniapp 微信小程序和H5的弹窗滚动穿透解决（真的有效）
uview u-collapse 布局重叠 异常，且导致页面无法上下滚动
树上骑个猴的博客
03-04 1740
1.设置ref <u-collapse ref="collapse_haha" :item-style="itemStyle" :head-style="headStyle"> 2.更新完数据后，重新布局 this.$nextTick(() => { this.$refs.collapse_haha.init() }) 官方文档解释：
uview弹出层实例代码
06-12
以下是一个基于 uView 的弹出层组件的示例代码： ```html <template> <view> <button @click="showPopup">打开弹出层</button> <u-popup :show="show" @close="closePopup"> <view class="popup-container"> <text>这是一个弹出层</text> <button @click="closePopup">关闭</button> </view> </u-popup> </view> </template> <script> export default { data() { return { show: false }; }, methods: { showPopup() { this.show = true; }, closePopup() { this.show = false; } } }; </script> <style> .popup-container { padding: 20px; background-color: white; border-radius: 10px; } </style> ``` 在上面的代码中，我们首先定义了一个按钮，并绑定了一个 `showPopup` 方法，该方法用于打开弹出层。接着，在 `u-popup` 中我们使用了 `show` 属性来控制弹出层的显示与隐藏。在弹出层内部，我们定义了一个包含文本和关闭按钮的容器，并将其作为 `u-popup` 的子组件。最后，我们定义了一个 `closePopup` 方法，用于关闭弹出层，并将其绑定到了 `@close` 事件上。 需要注意的是，在上面的代码中，我们并没有使用 `slot` 插槽来自定义弹出层的内容，而是直接将弹出层的内容作为 `u-popup` 的子组件。这是因为在 uView 中，`u-popup` 组件提供了默认的弹出层样式和布局，因此我们可以直接使用它提供的布局和样式，而无需自己编写。如果需要自定义弹出层的样式和布局，可以使用 `slot` 插槽来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值