前言

如今的web开发中无限加载非常常见，本文将简单介绍如何通过vue-infinite-scroll简单编写一个无限加载效果。

安装

npm install vue-infinite-scroll --save

在main.js中加入：

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

示例

通过一个简单的小案例介绍一下如何使用。

先看效果图：

因为代码比较复杂我只展示关于无限加载的部分

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      count: 3,
      data: [],
      busy: false,
      t: true,
    };
  },
  created() {
    // this.$store.dispatch("getNewList", [this.currentCatagtory, 3]);
  },
  computed: {
    ...mapGetters(["allData", "currentCatagtory"]),
  },
  watch: {
    currentCatagtory(newVaue, oldValue) {
      this.$store.dispatch("getNewList", [newVaue, 3]);
      console.log(newVaue);
    },
  },
  methods: {
    loadMore() {
      this.$store.dispatch("getNewList", [
        this.currentCatagtory,
        (this.count += 3),
      ]);
      this.busy = false;
    },
    throttle() {
      if (this.t === false) return;
      this.busy = true;
      this.t = false;
      console.log("我执行了");
      setTimeout(() => {
        this.loadMore();
        this.t = true;
      }, 3000);
    },
  },
};
</script>

简单介绍一下红色方框内的代码的意思

v-infinite-scroll="函数"表示回调函数是函数
infinite-scroll-disabled="busy"表示由变量busy决定是否执行函数，false则执行loadMore，true则不执行，看清楚，busy表示繁忙，繁忙的时候是不执行的。
infinite-scroll-distance="20"这里20决定了页面滚动到离页尾多少像素的时候触发回调函数，20是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。

然后简单介绍一下js部分

loadMore会发送ajax请求到后端，每加载一次像后端请求多加3条数据

throttle节流函数，3秒内只触发一次loadMore

这个效果的核心代码展示完毕，本身没有什么难点。下面介绍一下节流和防抖

节流和防抖

节流

节流就像他的名字一样，就像一个水龙头一直开到最大很浪费资源，每几毫秒触发一次，既不浪费，也源源不断。

本项目使用的是定时版节流。核心思想就是第一个函数开始定时器执行完之前第二个函数不生效

除了定时版还有时间戳版节流：

function throttle(func, wait) {
    var previous = 0;
    return function () {
        var now = Date.now();
        var context = this;
        var args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

防抖

防抖分为立即防抖和非立即防抖

非立即防抖：触发事件后函数不会立即执行，而是在n秒之后执行，如果n秒之内又触发了事件，则会重新计算函数执行时间。

function debounce(func, wait) {
    var timeout = null;
    var context = this;
    var args = arguments;
    return function () {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(function () {
            func.apply(context, args)
        }, wait);
    }
}

立即防抖：触发事件后函数会立即执行，然后n秒内不触发事件才会执行函数的效果

function debounce(func, wait) {
    var timeout = null;
    var context = this;
    var args = arguments;
    return function () {
        if (timeout) clearTimeout(timeout);
        var callNow = !timeout;
        timeout = setTimeout(function () {
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}