vue 解决滚动与下拉刷新冲突

1.思路

监听滚动条与顶部的距离,当距离不为0时,禁用下拉刷新。即滚动条在顶部时启用下拉刷新,不在顶部禁用下拉刷新。

2.代码实现

    <van-pull-refresh style="height:100%" v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled" >
      <van-tabs v-model="active">
        <van-tab title="xxx">
          <div class="carspace_con" id="carspace_con" ref="Box" @scroll="divScroll">
                        
          </div>
        </van-tab>
        <van-tab title="yyy">
          
        </van-tab>
        
      </van-tabs>
    </van-pull-refresh>

 

divScroll(e){
      let toTop = this.$refs.Box.scrollTop;
      //console.log('距离顶部'+toTop);
      if(toTop==0){
        this.refDisabled=false
      }
      else{
        this.refDisabled=true;
      }

    },

 

posted @ 2021-12-14 18:33  拖肥  阅读(1414)  评论(0编辑  收藏  举报