Vant组件库van-pull-refresh踩坑
van-pull-refresh在开发过程会和内容中最近的拥有overflow的元素的滚动发生冲突,造成向上滑动的时候会下拉加载
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"><van-listv-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,就可以实现加载了。
const refreshDisabled = ref(false);
const content = ref()const handleScroll = (event) => {// <el-table>...</el-table>// 有一些组件原本的自带的滚动不一定是scrollTop,比如el-table是.bodyWrapper.scrollTopconst scrollTop = event.target.scrollTopif(scrollTop<=0){refreshDisabled.value = false}else{refreshDisabled.value = true}
}
onMounted(async()=>{content.value.addEventListener('scroll', handleScroll)
})
onUnmounted (()=>{content.value.removeEventListener('scroll', handleScroll)
})