vant使用van-list不能上下滚动，滑动无效的解决？

已于 2023-11-14 16:46:11 修改
阅读量4.2k 收藏 1
点赞数 2
分类专栏： vant 文章标签： css html5 前端
于 2023-01-13 16:16:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61663332/article/details/128675861
版权

给van-list样式添加一个高度和滚动方向


height: 100%;
width: 100%;
overflow-y: auto;

秋绥冬禧.
关注
专栏目录
nuxt+vant用来van-popup移动端滚动失效
weixin_45148145的博客
03-09 625
问题描述：移动端官网跳转路由后的页面，页面无法滚动
vant 标签栏+上拉加载+下拉刷新demo van-tabs+van-pull-refresh+van-list demo
weixin_45753961的博客
06-09 1517
页面结构 van-tabs在最上面 van-pull-refresh在van-tabs下面 van-list在van-pull-refresh里面css关键 给van-pull-refresh设置高度为calc(100% - 44px)， 其中44px是van-tabs的高度， 同时给van-pull-refresh设置 overflow: hidden; overflow-y: scroll; 这样就能滚动起来加载更多以下是正文...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van-list :finished
vant样式之隐藏横向滚动条
最新发布
limuu09的博客
08-13 231
问题：设置了超出隐藏，overflow-y:hidden隐藏了纵向滚动条，但是横向滚动条样式还是很丑，懒得另调了。解决：在同一页面直接修改样式。
H5 iOS van-list数据量大 更新数据后滚轮失效
m0_37378152的博客
07-11 567
1.更新list数据后恢复滚轮位置 2.如果是个弹框内的van-list，缩小弹框的高度也有效
Vant2组件库van-list+Toast下拉加载滚动条回顶问题
Mr.小灰狼_随笔
01-08 2993
Vant2组件库van-list+Toast下拉加载滚动条回顶问题 目录 List 列表 Toast 轻提示 解决方案 1、不使用Toast 的 加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件
vue实现轮播图（不可滑动）
weixin_41813243的博客
03-12 469
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>轮播图</title> <metaname="viewport"content="width=device-width,initial-sca...
van-pull-refresh嵌套van-list滑动冲突问题
有兴趣深入交流
12-28 1478
style如下即可解决，关键是refresh滚动，list不用滚动 &-refresh { width: 100%; height: 100%; overflow: scroll; &-list { width: 100%; height: 100%; &-timeleft { padding-left: 40px; } } }
【JavaScript源代码】vant list组件滚动保留滚动条位置.docx
12-30
如果`$route.meta.keepAlive`为真，则使用缓存的组件实例，否则不使用。 接着，在路由配置文件`router.js`中，我们需要给每个需要缓存和保留滚动位置的路由添加`meta`对象，并设置`keepAlive`为`true`。同时，为了...
记录 vant-ui van-pull-refresh 的一些坑
热门推荐
m0_46165460的博客
02-04 1万+
坑 van-pull-refresh 里面要包含一个<div ref="fresh’> 在mounted里面设置一下高度 屏幕可视高度 - box距离顶部top，因为van-pull-refresh有个overflow:true属性，高度不够的时候下拉的时候会隐藏一些内容。 mounted () { this.freshHeight = document.document...
vant中list列表组件使用
weixin_55633731的博客
06-07 2874
<van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与底部距离offset时触发事件 offset="300" // 滚动条与底部距离offset时触发@load(默认.
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
关于vantList下拉刷新和上滑动冲突问题解决
weixin_44207118的博客
09-19 1103
vant中滚动加载向下滑动和下拉刷新冲突
vant-ui 下拉刷新组件和滚动冲突
CSDN_Sviexu的博客
12-31 1587
问题描述: 在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 ) 解决过程: 搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-refresh>组件样式. 尝试之后问题未解决. 于是重新整理了一遍样式,统一用flex布局, 然后将<van-pull-refresh>组件单独放在一个固定高度的容器内,并且给父容器添加overflow:hidden属性;再在
overflow-x滑动失效问题
FineDust的博客
02-20 1147
CSS滑动样式overflow-x问题处理
vant list 下拉刷新和滚动刷新
shi19970609的博客
11-05 900
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :offset="50" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(item, index) in pointsList" :key="index" cl.
vant list 下拉刷新 上拉加载
zongzi494的博客
11-07 1033
注意 list van-pull-refresh van-list 的高度。上拉加载不生效 经常出bug 大部分是样式高度问题。
【vant】van-list的滚动加载onload事件
i_am_a_div的博客
12-15 3516
【vant】van-list的滚动加载onload事件
vant 组件库 list 组件踩坑
qq_43806488的博客
12-17 380
在使用list组件式 触发onload事件后 会返回页面顶部 原因是vant组件库中的list组件使用异步加载数据时，并使用了vant中的toast做加载中的loading提示，则有可能会导致列表滚动高度为0，也就是回到了顶部。只要在list加载回调里不使用toast就可以避免这个问题。 翻来覆去看了半天代码 并没有toast组件 后来发现在axios 里给每个方法添加了toast的loading 效果 最终解决方案在拦截器里添加白名单 axios2.interceptors.request.use
vant2 van-popup不能弹出
07-28
问题: vant2 van-popup不能弹出 回答: 如果vant2的van-popup无法弹出，可能是由于以下几个原因导致的。首先，你需要确保在打开前关闭键盘，可以使用以下代码实现: ```html <van-popup class="dialog" show="{{ show }}" bind:before-enter="hideKeyboard"></van-popup> ``` ```javascript hideKeyboard() { wx.hideKeyboard({ complete: res => { console.log('hideKeyboard', res) } }) } ``` 其次，如果白色区域有overflow-y：auto，图片定位右上角不显示，你可以尝试以下代码: ```html <van-popup class="dialog" show="{{ show }}"> <view class="pop"> <van-icon class="close" name="close" bindtap="close"/> <image class="img" src="xxxx.png" lazy-load="true"></image> </view> </van-popup> ``` ```css .pop { position: relative; padding: 64rpx 75rpx; } .close { position: absolute; top: -58rpx; right: -46rpx; z-index: 999; } .img { height: 300rpx; width: 300rpx; } ``` 最后，如果你想要实现弹窗滚动同时底部滚动，可以使用以下代码: ```html <view wx:for="{{100}}" wx:key="item">{{item}}</view> <van-popup show="{{ true }}" custom-style="height: 20%;width: 80%" catchtouchmove="{{ catchMove }}">内容</van-popup> ``` ```javascript data:{ catchMove: true } ``` 希望以上解决方法能够帮助到你解决vant2 van-popup无法弹出的问题。 #### 引用[.reference_title] - *1* *2* *3* [【Vant Weapp】van-popup 弹出层](https://blog.csdn.net/wuli_youhouli/article/details/127763074)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秋绥冬禧.

一键三联就是最大的支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值