npm 包 vue2-infinite-scroll 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，无限滚动是非常常见的一种交互方式。而虽然可以用原生 JS 和 CSS 实现，但通常并不方便易用。为此，社区中出现了多个方便易用的无限滚动库，其中之一是 vue2-infinite-scroll。

在本篇文章中，我们将会介绍 npm 包 vue2-infinite-scroll 的使用教程，包括详细的使用步骤、深入理解以及代码示例。

什么是 vue2-infinite-scroll？

vue2-infinite-scroll 是一个基于 Vue.js 的无限滚动组件，其核心特点是带有“防抖和节流”和“反撇号回顶”功能，同时还提供了自定制监听滚动事件的 API。

安装和引入

可以通过 npm 命令安装：

npm install vue-infinite-scroll -S

安装完成后，还需要将其用于 Vue.js 项目中。方法有两种：

方法一：全局引入

在使用前需在启动文件 main.js 中配置全局引入：

import Vue from 'vue'
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

在组件中即可使用：

<template>
  <div v-infinite-scroll="onInfinite">
    <!-- list items -->
  </div>
</template>

方法二：局部引入

在组件中引入即可使用：

import infiniteScroll from 'vue-infinite-scroll'

export default {
  components: {
    infiniteScroll
  }
}

<template>
  <div v-infinite-scroll="onInfinite">
    <!-- list items -->
  </div>
</template>

详细使用步骤

配置 v-infinite-scroll

在 HTML 模板中，需要在容器元素上加入指令 v-infinite-scroll。这个指令需要设置一个参数，即回调函数：

<template>
  <div v-infinite-scroll="onInfinite">
    <!-- list items -->
  </div>
</template>

在上面的例子中，onInfinite 是一个已经定义好的函数。

编写回调函数

回调函数必须是一个在当前组件中定义的函数。当滚动条到达容器底部时，v-infinite-scroll 指令会触发该函数，在函数内编写新数据的获取逻辑即可。

-- -------------------- ---- -------
------ ------- -
  ---- -- -
    ------ -
      ------ --
    -
  --
  -------- -
    ---------- -- -
      ----------------------- -- -
        ---------- - --------------- ------------
      --
    -
  -
-

在上面的例子中，onInfinite 函数就是在请求新数据后更新列表数据。

绑定 scrollingElement

如果不设置 scrollingElement，v-infinite-scroll 默认监听滚动的就是 window 对象的滚动事件。但有时候需要监听其他元素的滚动事件，比如 overflow: auto 的容器。这时需要设置 v-infinite-scroll 的插值绑定值 element 为该容器，来监听该容器的滚动事件：

<template>
  <div v-infinite-scroll="onInfinite" :element="scrollContainer">
    <!-- list items -->
  </div>
</template>

在上面的例子中，我们为指令绑定了一个变量 scrollContainer，该变量代表滚动容器的 DOM 对象。

深入理解

防抖和节流

vue2-infinite-scroll 的“防抖和节流”特性，在处理滚动事件时处于重要位置，是其实现无限滚动的核心和优势。

防抖和节流的定义：

防抖：将多个连续的函数调用合并为一次，并在经过一个给定的时间间隔后再执行该函数。即当动作没有完成后的小间隔内反复触发动作，只执行一次。
节流：不管动作多快，都在一段时间内只执行一次动作。即在一个单位时间内，执行一次动作。

友情提示： 防抖适用于分页加载（滚动加载）等场景；节流适用于表单提交等场景。

为什么需要防抖和节流？

如果没有防抖和节流，每次监听到滚动事件后，回调函数都会被执行一次，如果在回调函数中有异步请求，那么很可能会因此拖慢整个页面的性能。

为此，vue2-infinite-scroll 集成了 throttle 和 debounce 这两个工具函数，能让回调函数被触发的频率控制在一定范围内，从而避免了这种性能损耗。

throttle：函数节流，减少请求频率，让函数执行时有一个规律的轮询机制。在一定时间范围内，受到的重复请求被省略，执行一次。
debounce：函数防抖，短时间间隔重复触发这个函数，只让程序在最后一次或者最前一次事件得到处理，每次函数调用等待着相应的时间如果这段时间过去了并且没有触发定时器，就执行函数。

它们的使用方法如下：

import { throttle, debounce } from 'throttle-debounce'

updateData.throttle(1000) //函数每1s执行一次
updateData.debounce(500) //只有发生在500s后才执行函数

通过 throttle 和 debounce，我们可以在无限滚动中，避免回调函数被过度触发的情况，提高页面性能和用户体验。

scrollDebounce 和 distance

vue2-infinite-scroll 还提供了两个属性控制滚动事件。它们是：scrollDebounce 和 distance。

scrollDebounce：该属性用于设置触发滚动事件的频率，以毫秒为单位。默认值为 200，适用于大部分场景。当页面滚动时，v-infinite-scroll 指令会通过 debounce 控制滚动事件的触发频率。
distance：该属性用于设置滑动到底部的触发距离。当滚动距离快要到达容器底部时才会触发 v-infinite-scroll 绑定的回调函数。默认值为 0，指滚动条边缘距离容器底部为 0 时触发。

非回调函数的监听

在一些场景中，需要监听滚动条滑动而非回调函数执行。这时，可通过 vue2-infinite-scroll 暴露的 v-isBottomReached 指令实现：

<template>
  <div v-infinite-scroll="onInfinite" :isBottomReached="scrollHandler">
    <!-- list items -->
  </div>
</template>

在上面的例子中，我们将 v-infinite-scroll 指令中的 onInfinite 回调函数改为变量 scrollHandler，赋值为：

scrollHandler (isBottomReached) {
  console.log('滚动条是否到达底部:', isBottomReached)
}

当滚动条滑动到底部时，会触发该函数且传递一个参数。该参数为 boolean 类型，表示滚动条是否到达容器底部。可据此来实现非回调函数的监听和业务逻辑。

示例代码

下面是一个用 vue2-infinite-scroll 实现滚动加载列表的示例代码。本代码将 list 作为一个独立组件，在 App.vue 中使用。

-- -------------------- ---- -------
---- -------- ---
----------
  ---- ---------------------------- ----------------------------
    ----
      --- ------------- ------ -- ------ -------------
        -- --------- --
      -----
    -----
  ------
-----------

--------
------ - -------- - ---- -------------------

------ ------- -
  ---- -- -
    ------ -
      ------ ---
      ----- -
    -
  --
  -------- -
    -------- -- -
      ------------------------------------ -- -
        ---------- - --------------- ------------
        -----------
      --
    --
    -------- ----------------- -
      ------------------------ ----------------
    -
  --
  ------- -- -
    --------------- - ----------- -- -
      ----- --------- - ------------------------------------------------
      ----- -------- - ---------------------- - ------------------- -- ----------------------
      -- ---------- -
        ---------------
      -
    -- -----
  -
-
---------

-------
-- -
  ------- -----
  ------------ -----
-
--------

-- -------------------- ---- -------
---- ------- ---
----------
  -----
    ----- --
  ------
-----------

--------
------ ---- ---- ------------

------ ------- -
  ----------- -
    ----
  -
-
---------

总结

通过对 npm 包 vue2-infinite-scroll 的介绍和使用，我们了解了这一非常实用的无限滚动组件，并学习了如何在 Vue.js 项目中集成、使用和优化无限滚动组件，同时也深入理解了题外话的防抖和节流的机制。在实际开发中，我们可以根据项目实际场景，更加灵活和专业地实现无限滚动的开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005668781e8991b448e2be7