uni-app项目：在uni-popup弹框组件中引用uni-list 列表无法滑动

最新推荐文章于 2024-09-20 14:39:02 发布
最新推荐文章于 2024-09-20 14:39:02 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： uniapp 文章标签： list vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jack_rose_me/article/details/121094503
版权

需要在弹框中显示一个列表，结果不能滑动，把uni-list单独拿到外面来也可以滑动，但是这俩组件一搭配，就失灵…

经过各种查资料，终于找到了：uni-popup组件默认是阻止了默认事件的冒泡

解决办法：直接修改uni-popup.vue 组件源码，去掉 @touchmove.stop.prevent=“clear”

【uniapp vue3学习】解决uni-popup弹出层出现，列表还能滚动
qq_34093387的博客
11-27 1466
【代码】【uniapp vue3学习】解决uni-popup弹出层出现，列表还能滚动。
uni-app scroll-view的滑动事件无法触发的问题
热门推荐
weixin_42028778的博客
04-27 1万+
template: <template> <view> <button type="primary" @click="change">{{text}}</button> <my-footer></my-footer> <scroll-view class="container" scroll-y="true...
uni-app：uni-popup 弹出层基本使用
听海边涛声
09-20 263
uni-app：uni-popup 弹出层基本使用
解决uniapp中uni-popup中的列表滚动到底部或者顶部，会触发页面的滚动
m0_71311743的博客
07-31 495
'hidden':'visible')">即可。1.首先需要根据判断弹窗是否打开，并将参数传给最外层盒子（指的是最外层盒子，子组件做外层盒子不行，必须是父组件盒子）2.根据参数判断在最外层标签上写入。这是父组件（或最外层盒子）如此便可以阻止父组件滚动。
在uniapp 中 uni-popup 内容过多的时候 滚动不了的问题
m0_73035846的博客
05-18 1131
我在用这个组件的时候，发现，限制一定的高度，如果内容太多，就会滚定不了，卡在哪里，如果不给高度，内容就会撑开满屏的状态，然后找了很多方法，也算找到了。
uniapp uni-popup弹窗在app端内容过多时，不滑动的问题
Mr_Feng0的博客
12-15 6246
uniapp uni-popup弹窗在app端内容过多时，不滑动的问题
解决uniapp使用三方四级联动插件ehPicker 配合uni-popup弹出层使用时出现无法滑动的问题
超级小恐龙~
04-25 6279
浪费了两小时的时间纠结在ehPicker 插件上，研究修改对比后要相信自己，排除插件本身原因，继续寻找其他问题突破，莫要浪费时间！！ 出现问题的原因在uni-popup上：@touchmove.stop.prevent="clear" uni-popup组件默认是阻止了默认事件的冒泡 因为我整个项目中只用到了这一处弹出层组件，所以 解决办法直接修改un-popup组件，去掉@to...
uni-popup中使用scroll-view不起作用
weixin_52934055的博客
07-06 2497
遮罩层样式
uniapp 多端兼容开发遇到的问题总结（四) ——专题：uView在弹出层里使用索引列表
NurTuam—何永杰
11-06 7774
前言 在使用uView开发项目中，遇到了一个业务场景： 点击输入框弹出底部窗口，内置电话号码区号索引列表，点击切换区号 : 当我根据逻辑以为在 u-popup 里加入 u-index-list 就行了，结果遇到问题了： 索引列表滚动不了； 选择索引字符，列表吸顶不了； 瞄点与顶部距离有偏差。 所以作者开始排查，但api文档没写相关用法，于是开始百度，但发现大家都在询问…（可能大家也百度过这类文章：https://ask.dcloud.net.cn/question/103729） 于是作者只能去修改源
uniapp中slot插槽的使用
LzzMandy的博客
04-30 1万+
插槽<slot>主要实现分发，当父组件引用带有插槽的子组件时，引用处的子组件内如有内容，当组件渲染的时候，<slot></slot> 将会被替换 1、默认插槽的使用： slot-one组件： <template> <view> <view>我是子组件</view> <slot&gt...
uni-app引入uni-popup弹出层插件以及列表复选框选中与取消
可控的事情要谨慎，不可控的事情要乐观。
06-20 5449
uni-popup 弹出层引入 基于 uni-app 的 UI 组件库 <!-- 选择项目弹框 --> <uni-popup ref="popup" type="center" :maskClick="false"> <view class="popup-project"> <view class="title"><text>选择项目</text></view> <view class=
uni-app/微信小程序video组件层级过高覆盖悬浮按钮
Syleapn的博客
07-30 1万+
uni-app/微信小程序video组件层级过高覆盖悬浮按钮： 一、出现的概率与场景 具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！ 二、分析： 大体分析说明： 一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view...
uni-app实战之社区交友APP（16）模块封装、文章和话题功能实现
CUFEECR的博客
03-13 1491
Vuex是Vue全局变量和方法的管理器，uni-app内置，可以定义state和mutations；点赞评论等操作需要验证权限；将接口请求模块进行封装、简化代码。首页交互需要获取文章分类、所有分类下的文章、上拉加载更多、避免重复加载；封装请求错误处理逻辑；格式化显示文章时间。实现文章详情页交互；分享支持微信、QQ、微博或者微信朋友圈；搜索文章需要实现加载拉刷新和缓存搜索历史。话题页涉及的接口包括话题分类、轮播图和热门话题列表；实现话题分类交互和加载更多；话题详情页包括话题信息和文章列表；实现搜索话题。
uni-app实战之社区交友APP（7）消息页开发
CUFEECR的博客
02-01 819
消息列表页面开发，配置好友和菜单按钮；实现消息列表项，用uni-badge实现新消息提示，处理文字溢出，用时间处理库和过滤器处理时间，封装为组件；配置下拉刷新和无数据页面；下拉弹出层使用uni-popup，需要添加点击事件。我的好友列表页需要配置动画、取消返回等；导航栏包括互关、关注和粉丝3个选项；好友列表可以复用首页列表；用uni-badge组件显示性别图标；封装好友列表组件并优化。聊天页面配置按钮；实现底部聊天输入框；聊天消息列表用scroll-view组件实现；封装聊天列表组件；完善聊天页功能。
uni-app中覆盖视频（原生子窗体）、视频下载
ZJW222的博客
03-12 4063
在uni-app中，使用video时，要在视频上覆盖内容，并且要兼容app端，安卓端的适配还好做点，但是ios的话，就弄了我好久，搞了大半天才搞定，这里记录下 1.微信小程序端 视频做的是全屏显示的视频，使用cover-view和cover-image对视频进行覆盖，不过，cover-view也有很多限制，像文字多行省略，这个没找到方式，单行的省略就直接用普通就可以了 使用cover-vie...
自学uni-app （5）扩展组件、组件插槽、uni生命周期
Slow down your pace
08-10 1187
uni-app可用于跨平台，支持app平台、h5平台、小程序平台 一次编写，多平台生成
【问题解决】uniapp-Vue3中u-popup滑动页面穿透问题
z914020826的博客
08-13 2118
在我们用uniapp写小程序或者APP的时候，有时候会用到一些弹出框组件。但在弹出框内部滑动会引起整个页面的滑动，让整个页面看起来不是和很好。
微信小程序uni-popup弹框内 使用overflow：scroll 失效
qq_42702425的博客
04-29 3378
项目场景： 开发微信小程序过程中，需要实现弹框设置最大高度，下图红框中内容可滚动查看； 问题描述 刚开始实现方法 给外层盒子设置最大高度 max-height: 600rpx;overflow:hidden; 滚动的盒子设置 overflow：scroll; 结果发现 overflow：scroll 失效了 查询文档得知，是因为 uni-popup最外层设置了默认值 @touchmove.stop.prevent=“clear”，禁止内部滑动，导致的滑动没有效果 解决方案： 给外层盒子 设置
uni-popup组件内部无法滚动问题记录
Junikusa的博客
04-11 2066
uni-popup组件，内部无法滚动。
如何在 uni-app 的 popup-dialog 组件中移除默认的取消和确定按钮？
最新发布
10-20
在 UniApp 中，如果你想在 `popup-dialog` 组件中移除默认的取消和确定按钮，你可以自定义组件的行为并直接控制显示。下面是一个简单的步骤说明： 1. 首先，在你的组件模板中，替换原有的 `<dialog>` 标签，通常它会包含默认的确认和取消按钮： ```html <view class="custom-popup"> <!-- 自定义内容 --> <view slot="content"> <text @click="handleCustomAction">自定义操作</text> </view> </view> ``` 2. 然后，在组件的样式(`styles.wxss`)中，隐藏默认的按钮，例如： ```css .custom-popup { .dialog-footer { display: none; } } ``` 3. 创建对应的事件处理器 `handleCustomAction` 来替代原生的确认和取消功能，当点击自定义的内容时执行相应操作： ```javascript export default { methods: { handleCustomAction() { // 这里可以是你想要的任何处理逻辑，比如关闭对话框 this.$refs.dialog.close(); }, }, }; ``` 这样就实现了自定义 `popup-dialog` 并移除了默认的取消和确定按钮。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值