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

已于 2024-03-29 11:48:31 修改
阅读量994 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： uni-app
于 2024-03-29 11:48:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/edwardwzw/article/details/137140503
本文讨论了如何在JavaScript中使用`touchmove.stop.prevent`方法来阻止元素的触摸移动事件的默认行为，提供了一个简短的示例代码解释其用法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

添加代码：

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

uniapp [全端兼容] - 详细实现日期时间 “范围“ 弹框选择器功能，底部弹窗式选择日期范围组件（开始日期和结束日期，选择2个年月日），支持自定义返回数据格式、限制最大最小日期等（详细示例代码）
资深程序员
05-04 4896
uni-app，微信小程序，支付宝小程序，安卓app，苹果ios，nvue，H5网页网站，日期时间选择器，范围选择，日期时间范围选取，uniApp日期范围选择插件，弹框式范围选取，日历时间范围，选择两个日期时间，uniapp选择开始和结束日期，年月日，月份，年份，Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围，picker日期选择器和时间选择器的用法，日期选择器，uniApp微信小程序日期时间段选择(精确到年月日时分)，时间段选择限制(开始日期结束日期相互限制)，日期选择组件单日/日期
Uni-app 笔记二 (项目笔记)
u014105655的博客
01-29 850
Uniapp 项目 笔记
uniapp使用u-popup组件弹窗出现页面还可滑动
weixin_53339757的博客
01-31 3578
解决u-popup出现遮罩层页面滑动问题
uniapp在h5端popup会穿透下层页面进行滚动的解决方案
小孩子
04-02 726
【代码】uniapp在h5端popup会穿透下层页面进行滚动的解决方案。
解决移动端uniapp：滑动弹出蒙层底部跟着滑动的问题
潇潇来吃瓜的博客
09-07 1030
【代码】解决移动端uniapp：滑动弹出蒙层底部跟着滑动的问题。
uniapp 微信小程序，app端在ios手机会出现页面左右滑动,安卓机不会
lihuihui6802的博客
03-12 2235
这种情况一般在模拟器或者微信开发者工具就能提现，用鼠标点击页面左右拖动，如果底部出现左右的滑动条，这个页面在苹果手机测试，一定会出现整个页面左右滑动问题。1、首先找到这个页面，一个盒子一个盒子的注释，然后保存看页面，哪个盒子显示导致出现横向滚动条，就找到了这个盒子。3、或者这个盒子加了内外边距，但没有添加box-sizing:border-box;4、或者这个盒子加了轮播或者滑动，没有添加溢出隐藏 over-flow:hiden;2、这个盒子的样式，看是否没有定宽，width:100%;
解决uni-app的scroll-view设置在弹窗里面后面的内容跟着滚动的问题
m0_55572918的博客
05-27 514
【代码】解决uni-app的scroll-view设置在弹窗里面后面的内容跟着滚动的问题。
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
【问题解决】uniapp-Vue3中u-popup滑动页面穿透问题
z914020826的博客
08-13 2835
在我们用uniapp写小程序或者APP的时候，有时候会用到一些弹出框组件。但在弹出框内部滑动会引起整个页面的滑动，让整个页面看起来不是和很好。
UNIAPP-对于弹窗外内容的点击与滑动的简单处理
qq_41071672的博客
04-24 869
UNIAPP#前置条件：环境为uniapp+vue3+ts,使用的是composition api开发。
uni-app uni-popup弹起后,页面会滚动的问题
加班可以,无偿加班不行
02-23 1602
uni-popup 并不能,完全阻止页面滚动，可在打开 uni-popup 的时候手动去做一些处理，禁止页面滚动,禁止页面滚动
uniapp使用uview ui库的popup或者overlay解决它的底层内容滚动问题
小孩子
03-18 1499
uniapp使用uview ui库的popup或者overlay解决它的底层内容滚动问题
web端下和uniapp下滑动穿透的解决方案，弹窗滑动导致底部滑动问题解决
weixin_44120503的博客
07-28 1906
web端和uniapp滑动穿透解决方案
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 5416
uni-app、u-popup、遮罩滚动穿透
uniapp弹窗层+指定区域滚动
weixin_43453621的博客
12-05 3064
uniapp弹窗层+指定区域滚动
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 3万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
uniapp编程u-popup滚动条穿模问题
dp17893的博客
03-20 1002
给u-popup添加 :overlayStyle="{'touch-action':'none'}"方法阻止滚动条穿模。如图，下方页面滚动条穿模，导致u-popup弹出框不可滑动问题。同时在内部的view的类中添加，使其固定高度，允许滚动。（新人自由编写，如大佬有更好解决方法。新手编写uniapp页面时，遇到的问题。u-popup弹出框滚动条穿模。
uniapp怎么安装uni-popup 组件
最新发布
04-02
### 如何在 UniApp 中安装 `uni-popup` 组件 要在 UniApp 项目中成功集成并使用 `uni-popup` 组件，需遵循以下说明： #### 1. 插件市场下载 前往 **HBuilderX 的插件市场** 或者访问官方文档链接，搜索关键词 `uni-popup` 和 `uni-transition`。找到对应的组件后点击安装按钮完成自动引入操作[^1]。 #### 2. 手动安装方式 如果无法通过 HBuilderX 自带工具获取最新版本，则可以选择手动克隆仓库到本地目录下再复制粘贴至项目的 components 文件夹路径之中；另外还需要单独添加依赖项 `uni-transition` 来支持动画效果。 #### 3. 配置文件修改 确保已在 main.js 中全局注册该组件以便于其他页面调用： ```javascript import Vue from 'vue'; // 引入popup组件 import uniPopup from '@/components/uni-popup/uni-popup.vue'; Vue.component('uni-popup', uniPopup); ``` #### 4. 页面引用实例化对象 当一切准备就绪之后，在目标 vue 文件内的 `<template>` 节点处声明如下结构即可展示基础形态下的对话框窗口[^2]: ```html <view> <!-- 其他内容 --> <button type="primary" @click="showPopup">显示弹窗</button> <uni-popup ref="popup" type="center"> 这里是中心位置的简单文本消息。 </uni-popup> </view> ``` 同时记得绑定事件处理函数用于控制其显隐状态变化逻辑关系链路畅通无阻塞现象发生情况存在时能够及时反馈给用户端知晓当前所处状况详情信息清楚明白无疑问之处才好继续往下推进流程顺利开展下去: ```javascript methods:{ showPopup(){ this.$refs.popup.open(); } } ``` 对于某些特殊场景比如防止外部区域被误触导致意外关闭动作执行失败等问题解决方案之一就是在根节点外包裹一层额外设置 overflow 属性动态切换机制从而达到预期目的效果最佳实践案例分享给大家共同学习进步成长成为更好的开发者群体的一员贡献自己的一份力量[^3]。 最后附上一段关于验证表单数据合法性的代码片段作为补充材料供大家参考借鉴学习吸收转化运用自如灵活应对各种复杂业务需求挑战不断突破自我极限追求卓越品质始终如一坚持到底永不放弃勇往直前共创辉煌未来[^4] : ```javascript checkPrice(price){ const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$/; if(!reg.test(price)){ return false;//不符合条件返回false } if(parseFloat(price)<1){ return false ; //小于最小值也返回false } return true ; }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值