vue开发--页面滚动加载(无插件)

版权声明： https://blog.csdn.net/GoldenLegs/article/details/82183131

1.利用原生document滚动原理

data:{
    onFetching:false, //防止页面滑动时多次加载
    page:0,           //滑动次数or加载数据的页数
},
mounted(){
    this.loadlist=function(){
        //axios请求和数据赋值
    }
    document.addEventListener('scroll',this.scrollLoad)
},
methods(){
    scrollLoad(){
        let scrollHeight= document.documentElement.scrollHeight || document.body.scrollHeight; //document的滚动高度
        let nowScotop = document.documentElement.clientHeight || document.body.clientHeight;  //可视区高度
        let wheight= document.documentElement.scrollTop || document.body.scrollTop; //已滚动高度
            
              
              
              if (this.onFetching) {
                      // do nothing
              } else {
                if (nowScotop >= scrollHeight - wheight-5 ) {
                  this.onFetching = true
                  setTimeout(() => {
                    
                    this.page+=1
                    this.loadlist() //加载列表的请求方法
                    this.onFetching = false
                  }, 500)
                }
              }
    }
}