vue-infinite-loading2.0 中文文档详解

Vue-Infinite-Loading2.0 是一个基于 Vue.js 的无限滚动加载组件，可以很方便地实现下拉刷新和分页加载。

安装

npm install vue-infinite-loading --save

使用

<template>
  <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</template>

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

export default {
  components: {
    InfiniteLoading
  },

  methods: {
    infiniteHandler($state) {
      // 加载数据
    }
  }
}
</script>

在组件中引入 vue-infinite-loading，然后在模板中添加一个 infinite-loading 组件，然后在方法 infiniteHandler 中加载数据。

infiniteHandler 接受一个 $state 参数，根据这个参数的不同状态来操作数据加载。

- loaded: 加载完成

- error: 加载失败

- complete: 数据已全部加载完成，不需要再进行加载。

// 加载成功
infiniteHandler($state) {
  axios.get('api/list').then(res => {
    if (res.data.length) {
      // 如果还有数据，调用 $state.loaded() 继续加载
      $state.loaded()
    } else {
      // 如果已经没有数据了，调用 $state.complete()，表示全部加载完成
      $state.complete()
    }
  }).catch(() => {
    // 加载失败，调用 $state.error() 重新加载
    $state.error()
  })
}

高度自定义

vue-infinite-loading 可以实现很完美的自定义。

<template>
  <div class="my-list">
    <div v-for="item in list" :key="item.id">{{item.text}}</div>
    <infinite-loading @infinite="infiniteHandler">
      <template #spinner="{ count, $index }">
        <!-- 自定义 spinner -->
      </template>
      <template #no-more>
        <!-- 自定义 no-more 提示 -->
      </template>
      <template #no-results>
        <!-- 自定义 no-results 提示 -->
      </template>
    </infinite-loading>
  </div>
</template>

使用 slot 来实现自定义，具体可以参考[官网](https://peachscript.github.io/vue-infinite-loading/)。

其他属性

vue-infinite-loading 还提供了一些其他属性，比如 spinner、no-more、no-results 来设置加载过程中和加载完成后的提示信息。此外还有 distance 来设置加载触发距离，默认值为 0。

<template>
  <infinite-loading
    :spinner="spinner"
    :no-more="noMore"
    :no-results="noResults"
    :distance="50"
    @infinite="infiniteHandler"
  ></infinite-loading>
</template>

<script>
export default {
  data() {
    return {
      spinner: '<em class="el-icon-loading"></em> 加载中...',
      noMore: '<em class="el-icon-circle-check"></em> 没有更多了',
      noResults: '<em class="el-icon-circle-close"></em> 暂无数据'
    }
  },

  methods: {
    infiniteHandler($state) {
      // 加载数据
    }
  }
}
</script>

总结

vue-infinite-loading2.0 是一个非常好用的组件库，可以实现无限滚动加载和下拉刷新。通过自定义 slot 来实现完美的视图控制，并且支持很多额外的配置。