vue 在pc端实现滚动加载

实现pc端的滚动加载功能

首先要想滚动加载要知道滚动条距离底部的距离，这里我定义3个方法

//滚动条在Y轴上的滚动距离

    getScrollTop() {

      var scrollTop = 0,

        bodyScrollTop = 0,

        documentScrollTop = 0;

      if (document.body) {

        bodyScrollTop = document.body.scrollTop;

      }

      if (document.documentElement) {

        documentScrollTop = document.documentElement.scrollTop;

      }

      scrollTop =

        bodyScrollTop - documentScrollTop > 0 ?

        bodyScrollTop :

        documentScrollTop;

      return scrollTop;

    },

    //文档的总高度

    getScrollHeight() {

      var scrollHeight = 0,

        bodyScrollHeight = 0,

        documentScrollHeight = 0;

      if (document.body) {

        bodyScrollHeight = document.body.scrollHeight;

      }

      if (document.documentElement) {

        documentScrollHeight = document.documentElement.scrollHeight;

      }

      scrollHeight =

        bodyScrollHeight - documentScrollHeight > 0 ?

        bodyScrollHeight :

        documentScrollHeight;

      return scrollHeight;

    },

    //浏览器视口的高度

    getWindowHeight() {

      var windowHeight = 0;

      if (document.compatMode == "CSS1Compat") {

        windowHeight = document.documentElement.clientHeight;

      } else {

        windowHeight = document.body.clientHeight;

      }

      return windowHeight;

    },

然后定义一个menu方法，就是滚动的时候，去加载的方法

menu() {

      if(this.isKaiGuan){

        let scroll =

          this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();

        if (scroll > -100) {

          this.sizePage++;

          this.getActivityList(this.activeName);

        }

      }

    },

这里要提一点，需要定义开关isKaiGuan，不然，滚动的时候，ajax异步加载，会一次性加载好多次

请求前定义false，请求回调后定义true，其实为了优化效果，可以这样写

if(res.data.data.length!=24){

                this.isKaiGuan = false;

            }else{

                this.isKaiGuan = true;

            }

判断是否长度是24，这里的24是我的一次加载的次数，这样可以保证下次如果数据不到24，就没必要在去加载了，相当于少加载一次。

然后只需要在mounted里添加

window.addEventListener('scroll', this.menu);

由于滚动加载会影响其他页面，保证其他页面滚动的时候，限制掉

添加判断

if (this.$route.name == "createActivites") {

        window.addEventListener('scroll', this.menu);

      }else{

        window.addEventListener('scroll', "");

      }

这样效果就是实现了，对了，如果还想用图片懒加载的话，可以使用vue自带的插件vue-lazyload

引入之后，只需要在img里添加v-lazy="images/...jpg"即可。

觉着好的话，记着点赞啊。