Vant组件库van-pull-refresh踩坑
van-pull-refresh在开发过程会和内容中最近的拥有overflow的元素的滚动发生冲突,造成向上滑动的时候会下拉加载
javascript
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="refreshFlag"
offset="20"
finished-text="刷新成功"
pulling-text="下拉可以刷新"
loosing-text="松开立即刷新"
@refresh="onRefresh"
:pull-distance="80"
:disabled="refreshDisabled"
:immediate-check="false"
>
<van-cell v-for="item in list" :key="item.id" :title="item" />
</van-list>
</van-pull-refresh>
目前使用的,并且已经解决问题的方法是通过通过设置::disabled="refreshDisabled" ,限制滚动实现的。
原理是:当滚动元素的scrollTop === 0 的时候,再下拉说明是下拉加载,然后更该:refreshDisabled的值为false,就可以实现加载了。
javascript
const refreshDisabled = ref(false);
const content = ref()
const handleScroll = (event) => {
// <el-table>...</el-table>
// 有一些组件原本的自带的滚动不一定是scrollTop,比如el-table是.bodyWrapper.scrollTop
const scrollTop = event.target.scrollTop
if(scrollTop<=0){
refreshDisabled.value = false
}else{
refreshDisabled.value = true
}
}
onMounted(async()=>{
content.value.addEventListener('scroll', handleScroll)
})
onUnmounted (()=>{
content.value.removeEventListener('scroll', handleScroll)
})