uniapp中使用u-popup组件导致的弹框下面的页面可滑动现象

已于 2024-03-29 11:48:31 修改
阅读量651 收藏
点赞数 3
分类专栏： 前端 文章标签： uni-app
于 2024-03-29 11:48:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/edwardwzw/article/details/137140503
版权

添加代码：

@touchmove.stop.prevent="()=>{}"

牧羊狼爱学习
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
web端下和uniapp下滑动穿透的解决方案，弹窗滑动导致底部滑动问题解决
weixin_44120503的博客
07-28 1459
web端和uniapp滑动穿透解决方案
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 4251
uni-app、u-popup、遮罩滚动穿透
在uniapp 中 uni-popup 内容过多的时候 滚动不了的问题
最新发布
m0_73035846的博客
05-18 302
我在用这个组件的时候，发现，限制一定的高度，如果内容太多，就会滚定不了，卡在哪里，如果不给高度，内容就会撑开满屏的状态，然后找了很多方法，也算找到了。
uniapp开发微信小程序之u-popup的滚动条
only_zing的博客
05-29 2299
uView的u-popup设置固定高度，内容超出滚动
uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动解决方案
liuyuan_java的专栏
08-13 1545
1.弹窗组件代码，需要在最外层的view中加入@touchmove.stop.prevent="moveHandle"，且弹窗中需要滚动的列表要使用scroll-view标签包裹起来，且scroll-y 属性不能忘记加。滑动弹窗里的列表，弹框下面的内容也会跟着滑动，导致弹窗中的列表不能正常滚动。
uniapp在h5端popup会穿透下层页面进行滚动的解决方案
小孩子
04-02 302
【代码】uniapp在h5端popup会穿透下层页面进行滚动的解决方案。
uniapp弹窗层+指定区域滚动
weixin_43453621的博客
12-05 2877
uniapp弹窗层+指定区域滚动
react-native-popup-menu:React Native的弹出菜单
05-02
安装使用npm npm install " @breeffy/react-native-popup-menu " --save使用纱yarn add "@breeffy/react-native-popup-menu"用法图书馆版本React Native版本描述 如何在Typescript中使用 0.7.0 React本机0.62.2 展示...
react-popup：React弹出组件
02-04
这就是为什么我们使用全局API控制组件而不是在组件内部呈现它的原因。 也许这是一种反模式，也许不是。 如果还不存在问题，请打开一个问题随意讨论。安装使用npm（或yarn）安装它（ npm install react-popup --save...
react-leaflet-editable-popup:react-leaflet组件，扩展了弹出窗口的功能
05-14
如果您仍在使用react-leaflet @ ^ 2，请使用npm i react-leaflet-editable-popup@^1.0.0 ，或在可编辑的弹出窗口上使用v2 npm i react-leaflet-editable-popup@^1.0.0 。 有关详细信息，请参见部分。安装通过npm...
react-native-popup-menu：React Native的弹出菜单组件
01-31
特征： 易于使用的弹出/上下文菜单多种模式：动画，不动画，从底部滑动或弹出框默认情况下打开和关闭动画可选的后退按钮处理造型简单可自定义各种级别-菜单选项，位置，动画可以像受控组件一样工作，也可以不受控制...
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 2万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
uni-app uni-popup弹起后,页面会滚动的问题
加班可以,无偿加班不行
02-23 838
uni-popup 并不能,完全阻止页面滚动，可在打开 uni-popup 的时候手动去做一些处理，禁止页面滚动,禁止页面滚动
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）
记笔记
08-16 1773
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）在微信小程序、App 平台，页面内需要特殊处理一下滚动穿透，在页面顶部添加一个page-meta组件动态修改页面样式。
滚动穿透的6种解决方案(转载)
muzidanwu的博客
09-18 3516
原文链接: 滚动穿透的6种解决方案. 在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 这个经典八阿哥也是面试时经常会被追问的问题。相信能看到这篇文章的你，已经是遇到了这个问题。我就不gif展示问题效果了。 接下来我网罗了网络，整理了别人说的方案和我自己的方案，一共实现了六种方法，并经过了自己手
uni-app 在使用popup插件时，滚动弹出框的内容时，遮罩下方的页面也会跟着滚动
wjm0519的博客
07-20 5397
问题：uni-app 在使用popup插件时，滚动弹出框的内容时，遮罩下方的页面也会跟着滚动 解决方法：在uni-popup 添加代码@touchmove.stop.prevent="moveHandle"
uniapp 小程序端使用uni-popup组件时，页面用了scroll-view滚动组件，uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案
qq_42628556的博客
04-10 3219
在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent="" 和一个样式height: 100vh;
uniapp打开弹窗后，影响其他页面的滑动
m0_62515138的博客
08-09 206
百度了好久，都说的是什么 “弹出层scrollview滚动影响页面级滚动的方案” 但还是没有解决我的需求。
uniapp 中 uni-popup 如何使用
04-02
uni-popup 是 uni-app 中的弹窗组件，可以用来展示一些提示信息或作为选择器等功能的弹窗。下面是 uni-popup 的使用方法： 1. 引入组件：在需要使用的页面中，引入 uni-popup 组件。 ``` <template> <view> <uni-popup></uni-popup> </view> </template> <script> import uniPopup from '@/components/uni-popup/uni-popup.vue' export default { components: { uniPopup } } </script> ``` 2. 基本使用：在页面中使用 uni-popup 组件时，需要传递一些参数，如弹窗内容、弹窗位置、是否显示遮罩等。 ``` <template> <view> <uni-popup :show="showPopup" :position="position" :mask="mask" @change="popupChange" > <view>这是弹窗的内容</view> </uni-popup> </view> </template> <script> export default { data() { return { showPopup: false, // 是否显示弹窗 position: 'bottom', // 弹窗位置，可选值为 top、bottom、center mask: true // 是否显示遮罩 } }, methods: { // 弹窗状态改变时触发 popupChange(e) { console.log(e) } } } </script> ``` 3. 高级使用：可以通过 slot 传递自定义的弹窗内容，并在弹窗状态改变时触发相应的事件。 ``` <template> <view> <uni-popup :show="showPopup" :position="position" :mask="mask" @change="popupChange" > <view slot="content">这是自定义的弹窗内容</view> <view slot="footer"> <button @click="confirm">确定</button> <button @click="cancel">取消</button> </view> </uni-popup> </view> </template> <script> export default { data() { return { showPopup: false, position: 'bottom', mask: true } }, methods: { popupChange(e) { console.log(e) }, confirm() { this.showPopup = false console.log('点击了确定按钮') }, cancel() { this.showPopup = false console.log('点击了取消按钮') } } } </script> ``` 以上是 uni-popup 的基本使用方法，可以根据实际需求进行相应的调整和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值