Vue中下拉加载的原理

不管是Vue还是H5 下拉的加载的原理就是监听页面滚动触底

Vue中监听触底的逻辑

methods:{
    created() {
          let _this = this;

          //变量scrollTop是滚动条滚动时，距离顶部的距离
          var scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
          var windowHeight =
            document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
          var scrollHeight =
            document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
          let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
          console.log(h)
          if (scrollTop + windowHeight == scrollHeight) {

            console.log(
              "距顶部" +
              scrollTop +
              "可视区高度" +
              windowHeight +
              "滚动条总高度" +
              scrollHeight
            );
            //  下面就是需要你完成的事情
            // 比如说:  写后台加载数据的函数   _this.onLoad();
            // 比如说:  触底提示或者警告
          }
    }
}