[ vant ] 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-refreshv-model="refreshing"  // 表示是否在刷新 , 下拉时自动变为 true ,需要在请求数据结束后手动设置为 false@refresh="onRefresh"    // 下拉刷新触发的方法 , 将分页变为 1 然后请求数据:disabled="pullRefreshDisabled" // 是否禁用下拉刷新的方法 , 禁用后将无法下拉刷新 , 通过列表滚动高度来控制这个值
><van-listv-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我以前挺抗拒使用判断滚动来写这个 , 但是当我真的写了之后 , 我直呼真香 !

[ vant ] vue移动端下拉刷新组件相关推荐

vue移动端下拉刷新组件、上拉加载组件
1.下拉刷新DropDownRefresh.vue <template> <div @touchstart="touchStart($event)" @touch ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
android下拉刷新动画效果代码_vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
Google官方下拉刷新组件---SwipeRefreshLayout
今天在Google+上看到了SwipeRefreshLayout这个名词,遂搜索了下,发现竟然是刚刚google更新sdk新增加的一个widget,于是赶紧抢先体验学习下. SwipeRefreshL ...
swift添加下拉刷新_React Native自定义下拉刷新组件
React Native 自定义下拉刷新组件 PullToRefresh 针对猴急一些的同学,可以先在这个 Expo网站在线运行下demo看看效果 . 完整的代码,在 Github仓库 . 下拉刷新, ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果
题记 -- 优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 盘点Flutter跨平台APP开发中使用到的进度条 Flutter是谷歌推出的最新的移动开发 ...

[ vant ] vue移动端下拉刷新组件

写在前面

开始

结束

[ vant ] vue移动端下拉刷新组件相关推荐

最新文章

热门文章