vue 实现列表自动滚动

Vue 可以通过使用 Vue.js 插件和第三方库来实现列表自动滚动。本文将以 vue-infinite-loading 拓展库为例介绍如何实现一个列表自动滚动的效果。

Vue-infinite-loading 可以让我们实现列表自动滚动，只需要在列表展示的最后一个元素加入一个 loading 状态即可，等待数据加载完成后自动滚动到下一个列表的内容。使用 vue-infinite-loading 可以节省不少时间和代码工作量。

首先下载 vue-infinite-loading

npm install vue-infinite-loading

然后在需要展示列表的页面引入 vue-infinite-loading 插件，并注册

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">第 {{ index }} 项：{{ item }}</li>
      <infinite-loading :identifier="infiniteId" :on-infinite="infiniteHandler"></infinite-loading>
    </ul>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'

export default {
  name: 'List',
  components: { InfiniteLoading },
  data () {
    return {
      items: [...],
      // 加载列表的ID
      infiniteId: 'infinite-list',
      // 触发加载的函数
      infiniteHandler ($state) {
        setTimeout(() => {
          // 加载新数据
          this.items.push(...)
          $state.loaded()
        }, 2000)
      }
    }
  }
}
</script>

这样就可以实现列表自动滚动的功能了。在列表的底部加上一个 Loading 状态的元素，等待数据加载完成后自动展开新项。可以自己控制滚动条的滑动距离和展示样式。