博客

一、需求说明：

1.一个页面，有两个可以切换的tab页，上拉加载数据。

2.在进行tab页切换的时候，首次会调用两次接口，出现数据重复的现象（虽然在数据处理的时候可以用去重解决，但不是最好的方法）。

3.最后采用原生的滚动事件监听。

4.最后找到的原因是由于其他功能设置引起的没有数据也有整屏幕的高度，因此vant组件调用了两次列表查询接口。

二、解决方案

 mounted() {
     //列表查询方法
    this.changeTab();
    window.onscroll = ()=> {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
            if ((Math.ceil(scrollTop + windowHeight)== parseInt(scrollHeight))&&scrollTop!=0) {
                this.changeTab();
            }
    }
  },
  beforeDestroy(){     //离开页面时的生命周期函数
      window.onscroll = ()=>{}
  },