解决uniapp中uni-popup中的列表滚动到底部或者顶部，会触发页面的滚动

已于 2024-07-31 17:42:29 修改
阅读量217 收藏
点赞数 4
文章标签： uni-app 前端 javascript
于 2024-07-31 17:35:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71311743/article/details/140828416
版权

1.首先需要根据判断弹窗是否打开，并将参数传给最外层盒子

2.根据参数判断在最外层标签上写入

<page-meta :page-style="'overflow:'+(iskais?'hidden':'visible')"></page-meta>即可
 

 如此便可以阻止父组件滚动

倔强的√3
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
01-18
在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。 现象还原 官方地址 手机扫码查看demo，查看两个组件Popup组件和Datetime...
uniapp 自定义弹层时，底部页面滚动而弹层不能滚动
热门推荐
iVRJay的博客
12-28 1万+
今天做页面有个需求： 页面有个列表（A），内容过多时需要滚动， 然后做了个弹层，里面也有个列表（B），内容过多时需要滚动 由于A列表使用的web-view组件，而B列表使用view组件加overflow:hidden auto; 结果是：当弹层显示时，B列表不能滚动，底部列表A却能滚动； 于是在度娘上找了找： 1、发现@touchmove.prevent貌似好牛逼，赶紧加上去，结果AB...
uniapp中使用u-popup组件导致的弹框下面的页面可滑动现象
qq_42549017的博客
02-01 1612
同事使用的u-popup组件，然后就有了弹框出来了，但是底下的页面仍然可以滑动，没办法，有问题就解决问题，在网上找了一圈，找的第一种方法，也是看到最多次的方法，但对我没用。于是又花时间找了一圈，找到了一用就好的方法，真的是为了一个bug花费了我老长时间，希望你们不踩坑。步骤一：在main.js中写入两个方法 一个是可以滚动方法 一个是禁止滚动方法。步骤二：在使用弹框的页面调用该方法，在弹窗需要弹出展示前先调用禁止滚动的方法。在关闭弹窗之前调用滚动方法。
uniapp u-popup封装弹框背景滚动/滚动穿模
weixin_45811884的博客
06-19 303
【代码】uniapp u-popup封装弹框背景滚动/滚动穿模。
vux-popup-dialog遮罩在最上层解决办法 z-index问题
Front小思的博客
07-12 2283
今天遇到的问题是，vux组件框架中使用弹窗，有多层弹窗，vux popup mask遮罩的z-index问题，找了相关解决方法，感觉那有点麻烦​！ 一、改组件的源码 在一个页面的子组件中引用vux的popup组件时，出现mask遮罩在最上层的问题，百度了一下发现有两种解决办法，现提供第三种。 popup在子组件引用时，vux将vux-popup-mask默认添加到body末尾，如果引用popup的子组件的根节点未添加z-index属性，子元素无论层级多高都会被遮罩，mask会在最上层。 所以解决办法就是.
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）
记笔记
08-16 2059
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）在微信小程序、App 平台，页面内需要特殊处理一下滚动穿透，在页面顶部添加一个page-meta组件动态修改页面样式。
uniapp使用u-popup组件弹窗出现页面还可滑动
weixin_53339757的博客
01-31 2254
解决u-popup出现遮罩层页面滑动问题
uniapp编程u-popup滚动条穿模问题
dp17893的博客
03-20 564
给u-popup添加 :overlayStyle="{'touch-action':'none'}"方法阻止滚动条穿模。如图，下方页面滚动条穿模，导致u-popup弹出框不可滑动问题。同时在内部的view的类中添加，使其固定高度，允许滚动。（新人自由编写，如大佬有更好解决方法。新手编写uniapp页面时，遇到的问题。u-popup弹出框滚动条穿模。
uniapp自动滚动到底部
qq_34631220的博客
05-21 4284
scroll-into-view使用 <scroll-view scroll-y="true" style="height: 400rpx;" :scroll-into-view="bottomId" scroll-with-animation="true"> <view v-for="(item,index) in list"> <view :style=" 'height: 180rpx; background-color:' + ...
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
uniapp多选标签/多选按钮/多选框源码
12-01
在IT行业中，尤其是在移动应用开发领域，`uni-app`是一个非常重要的框架，它允许开发者编写一次代码，跨多个平台运行，包括iOS、Android以及H5等。本项目着重讲解了如何在`uni-app`中实现多选标签、多选按钮和多选框...
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
【uniapp vue3学习】解决uni-popup弹出层出现，列表还能滚动
qq_34093387的博客
11-27 1218
【代码】【uniapp vue3学习】解决uni-popup弹出层出现，列表还能滚动。
uni-popup 遮罩层滚动
hanxiao_xiao的博客
11-27 1385
遮罩弹出层中 内容使用 <uni-popup ref="popupSX" type="top" class="pop-cla"> <view class="screen"> <scroll-view scroll-y="true" class="scroll-Y"> <view class="screen-b" v-if="userInfo.dataScope < 3"> <tex
uniapp 滑动页面至某个元素或顶部
weixin_59685936的博客
03-05 1009
uniapp 滑动页面至某个元素或顶部
uniapp 小程序端使用uni-popup组件时，页面用了scroll-view滚动组件，uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案
qq_42628556的博客
04-10 3336
在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent="" 和一个样式height: 100vh;
解决uni-popup禁止滚动穿透
最新发布
limmt2020的博客
06-25 640
此样式表示取消区域触摸动作。在弹框内容页面中修改样式。
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、付费专栏及课程。

余额充值