vue3.0使用van-pull-refresh,与页面滚动事件冲突,滚动数据,会触发刷新

遇到的问题:vue3.0使用van-pull-refresh,与页面滚动事件冲突,滚动数据,会触发刷新
解决方案:
1.van-pull-refresh加上disabled,限制它是否可以滚动

<van-pull-refresh
     v-model="loadingRefresh"
      success-text="刷新成功"
      :disabled="refreshDisabled"
      @refresh="onRefresh"
  >
 <div v-if="list.length>0" ref="content">
   <div  v-for="(item,index) in list" :key="index">
   </div>  
 </div>
</van-pull-refresh>        

2.添加事件监听滚动,获取滚动距离,设置disabled

const refreshDisabled = ref(false);
const content = ref();
const loadingRefresh = ref(false);
const scroll = (event) => {
  const scrollTop = event.target.scrollTop
  if(scrollTop<=0){
    refreshDisabled.value = false
  }else{
    refreshDisabled.value = true
  }
}
onMounted(async()=>{
  content.value.addEventListener('scroll', scroll)
})
const onRefresh = () => {
   setTimeout(() => {
     showToast('刷新成功');
     loadingRefresh.value = false;
   }, 1000);
 };

你可能感兴趣的:(vant,vue,前端,vue)