Vue移动端下拉刷新组件的使用教程
学习关键语句:
vant list组件和下拉刷新
vant 下拉刷新和局部滚动冲突
写在前面
每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候
都会出现下拉刷新和列表下滑局部滚动的冲突 !
这让我很 ! 难 ! 受 !
这篇文章提供 来自于浏览精彩的互联网并通过我实际使用得来的体验 给出 2 个解决方法 , 虽然说我还看到有人给的解决方法是 overflow 加给父级 , 我就觉得挺迷的 , 不晓得是怎么一回事
开始
第一种方法应该是很方便的一种了 , 就是修改源码样式了 , 你可以将以下代码加入到你的 css 中 , 注意 , 如果你使用的是局部 css , 请使用穿透或者新开一个全局 style
.van-pull-refresh {
height: calc(100vh - 100px) !important; // 此处的 100px 需要根据你的实际情况来处理 , 是页面中不包含列表的高度部分
overflow: auto !important;
}
但是有时候会出现第一种方法不起作用的情况 , 遇到这种情况 , 我也只能推荐你使用原生方法 scroll 来判断是否需要进行下拉刷新了
第二种就是即时判断是否需要下拉刷新了
这种方法的原理就是 当列表的 scrollTop 为 0 时 , 说明列表已经到顶了 , 到顶了还往下拉说明你就是想要刷新列表 , 如果 scrollTop 不等于 0 那就是列表向下滑动而已
我们看下使用组件时需要的属性
<van-pull-refresh
v-model="refreshing" // 表示是否在刷新 , 下拉时自动变为 true ,需要在请求数据结束后手动设置为 false
@refresh="onRefresh" // 下拉刷新触发的方法 , 将分页变为 1 然后请求数据
:disabled="pullRefreshDisabled" // 是否禁用下拉刷新的方法 , 禁用后将无法下拉刷新 , 通过列表滚动高度来控制这个值
>
<van-list
v-model:loading="loading" // 是否处于加载状态 , 列表滑到最底处时自动变成 true , 变为 true 时不会触发 load 事件方法
:finished="finished" // 是否已经加载完成
finished-text="没有更多了"
@load="onLoad" // 加载新数据的方法 , 移动端一般传入新的页数将新数据数组添加到原有数据数组之后
@scroll="divScroll" // 滚动时触发的事件 , 来判断当前滚动的高度是多少
>
<div v-for="(item, index) in data" :key="index">
{{ item }}
</div>
</van-list>
</van-pull-refresh>
如果都看了上面的注释 , 那么其实也很简单了 , 我们在 divScroll 方法中实时监控滚动的高度 , 当滚动的高度 == 0 的时候 , 就给下拉刷新组件可以下拉刷新的功能
const pullRefreshDisabled = ref(false)
const divScroll = (e: any) => {
if (e.target.scrollTop == 0) {
pullRefreshDisabled.value = false
} else {
pullRefreshDisabled.value = true
}
}
用了这么长时间 , 我越发觉得一个 any 走天下了
初始值设置为 false 是为了一开始就能下拉刷新 , 千万别搞混 , 这个 pullRefreshDisabled 为 true 时是不能下拉刷新 , 为 false 时是可以下拉刷新
结束
emmm我以前挺抗拒使用判断滚动来写这个 , 但是当我真的写了之后 , 我直呼 真香 !
到此这篇关于Vue移动端下拉刷新组件的使用教程的文章就介绍到这了,更多相关Vue下拉刷新组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue 取出v-for循环中的index值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于vue路由教程之静态路由的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue中使用Ueditor的方法，本文通过实例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue2中配置Cesium全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue文本模糊匹配功能如何实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
electron-vue 运行报错 Object.fromEntries is not a function
Object.fromEntries() 是 ECMAScript 2019 新增的一个静态方法，用于将键值对列表（如数组）转换为对象，如果在当前环境中不支持该方法，可以使用 polyfill 来提供类似功能，接下来通过本文介绍electron-vue 运行报错 Object.fromEntries is not a function的解决方案2023-05-05
今天小编就为大家分享一篇Vue根据条件添加click事件的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现搜索小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论