uni-app——在 uni-popup 中设置overflow-y: scroll失效

最新推荐文章于 2024-11-28 16:34:44 发布
最新推荐文章于 2024-11-28 16:34:44 发布
阅读量979 收藏
点赞数 1
分类专栏： 有点儿东西 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43201350/article/details/136109408
版权
解决uni-popup内overflow-y: scroll无效的问题，通过修改源码移除@touchmove.stop.prevent事件处理。
摘要由CSDN通过智能技术生成

找到uni-popup源码，把@touchmove.stop.prevent去除即可

微信小程序uni-popup弹框内 使用overflow：scroll 失效
qq_42702425的博客
04-29 3526
项目场景： 开发微信小程序过程中，需要实现弹框设置最大高度，下图红框中内容可滚动查看； 问题描述 刚开始实现方法 给外层盒子设置最大高度 max-height: 600rpx;overflow:hidden; 滚动的盒子设置 overflow：scroll; 结果发现 overflow：scroll 失效了 查询文档得知，是因为 uni-popup最外层设置了默认值 @touchmove.stop.prevent=“clear”，禁止内部滑动，导致的滑动没有效果 解决方案： 给外层盒子 设置
uni-app内置组件picker-view和uni-popup的使用注意事项
m0_60605042的博客
06-02 4941
参考说明：uni-app的官方文档在使用bindChange方法时会有延迟，可以加上immediate-change=‘true’立即执行左边的是每列的下标，右边的数字是每列里面的选中的下标。
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
场景概述 众所周知，弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给body添加样式： overflow: hidden; height: 100%; 在某些机型下，你可能还需要给根节点添加样式： overflow: hidden; 关闭蒙层时，移除以上样式。 优点： 简单方便，只需添加css样式，没有复杂的逻辑。 缺点： 兼容
uniapp 手机端滚动不可用问题解决
鱼爱喝可乐的博客
08-30 2585
uniapp 手机端滚动不可用问题解决 H5、小程序页面
uniapp css无法显示进度条的问题解决
最新发布
lyz246859的博客
11-28 294
最近在开发uniapp页面时 发现即使写了css overflow: scroll强制显示滑动进度条 依然没有显示，想了想，肯定是官方的样式表做了相应的处理。
uni-popup组件内部无法滚动问题记录
Junikusa的博客
04-11 2212
uni-popup组件，内部无法滚动。
在uniapp 中 uni-popup 内容过多的时候 滚动不了的问题
m0_73035846的博客
05-18 1496
我在用这个组件的时候，发现，限制一定的高度，如果内容太多，就会滚定不了，卡在哪里，如果不给高度，内容就会撑开满屏的状态，然后找了很多方法，也算找到了。
uniapp滚动overflow-y: scroll失效问题
m0_62152730的博客
04-13 5455
在uni-popup使用overflow：scroll失效问题。 原因：uni-popup最外层设置了@touchmove.stop.prevent="clear"，禁止内部滑动，导致滑动没有效果。 结果：去掉@touchmove.stop.prevent 即可。
css滚动条设置（选择器）
weixin_49934623的博客
11-18 1057
::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分. ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分. ::-webki
uniapp scroll-y 小程序失效
weixin_51558009的博客
01-30 1138
滚动效果失效，大都是高度的问题 如果出现不滚动的问题，沿着scroll-view标签网上查找，看那个标签的高度溢出，只要scroll-view及父级标签高度都为屏幕高度即出现滚动。 例如：
UNIAPP弹窗跳转页面无法滚动bug
V1040375575的博客
10-22 649
【代码】UNIAPP弹窗跳转页面无法滚动bug。
关于解决uniapp超出部分无法上下无法滑动问题
qq_63997101的博客
07-02 3916
没有修改代码之前的最外层代码为得到的效果是这样的 ：超出的部分上下是不可以进行滑动的。
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
uni-ui安装初始化
11-23
在uni-app项目中，安装uni-ui的过程通常分为以下几步： 1. **全局安装CLI工具**：确保你已经安装了Node.js环境，然后通过命令行工具全局安装uni-app的CLI工具： ``` npm install -g @dcloudio/cli ``` 2. **...
解决uni-popup禁止滚动穿透
Girasoles的博客
04-10 2154
当滚动弹窗的时候，也会滚动弹窗下的页面，设置了page-meta无效，用下面这种方法解决了。clear写一个空方法即可。
uni-app 显示隐藏 隐式下拉，改变 overflow 属性
u014748857的博客
07-31 2205
一、 <text class=“li_s” :class="[isActive === index ? ‘add_li’ : ‘one’]" @tap=“changeClass(index)”> </text> 二、 export default { data() { return { isActive:’’ } } } 三、 methods:{ changeClass(index){ if(this.isActive=index){
uniapp 小程序端使用uni-popup组件时，页面用了scroll-view滚动组件，uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案
qq_42628556的博客
04-10 3647
在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent="" 和一个样式height: 100vh;
uniapp编程u-popup滚动条穿模问题
dp17893的博客
03-20 864
给u-popup添加 :overlayStyle="{'touch-action':'none'}"方法阻止滚动条穿模。如图，下方页面滚动条穿模，导致u-popup弹出框不可滑动问题。同时在内部的view的类中添加，使其固定高度，允许滚动。（新人自由编写，如大佬有更好解决方法。新手编写uniapp页面时，遇到的问题。u-popup弹出框滚动条穿模。
uniapp 页面无法滚动问题
xiaokangna的博客
08-07 1494
【代码】uniapp 页面无法滚动问题。
uni-app框架 uni-popup 设置z-index
08-10
uni-app是一个基于Vue.js的跨平台应用开发框架，它允许开发者编写一套代码同时构建微信小程序、H5、App（包括iOS和Android）。uni-popup在uni-app中用于弹出层，比如显示模态框或者通知。如果你想要设置`uni-popup`的层级（z-index），可以在创建popup实例时指定`position`属性，并通过调整`position-adjust`属性来影响其z-index值。 例如： ```javascript const popup = this.$create('uni-popup', { content: '这是弹窗内容', position: 'bottom', // 可选值有'top', 'bottom', 'left', 'right' position-adjust: 'padding-bottom', // 调整方式，默认是'top'，这会影响z-index的实际位置 }, { data: {} }) ``` 如果你想让某个特定的popup在所有popup之上，你可以尝试设置它的`position-adjust`为'none'，使其定位不受其他元素的影响，但请注意，这不是标准的CSS z-index处理方式，uni-app可能会有自己的规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值