vue中使用vue-infinite-scroll进行列表分页加载

需求：vue项目中列表需要做分页

1.先安装 vue-infinite-scroll 这个包

以下两种安装方式 具体根据你自己的包管理器来定

npn安装

npm install vue-infinite-scroll

yarn安装

yarn add vue-infinite-scroll

好了 直接上代码

<template>
  <div>
    <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <div  v-for="(item, index) in listData" :key="index">
        {{ item }}
      </div>
    </div>
	<!-- 
	v-infinite-scroll="loadMore":
	这是一个指令，用于绑定一个滚动到底部时触发的方法。在这里，loadMore是你定义的方法，用于加载更多数据。
	infinite-scroll-disabled="loading":
	这是一个绑定属性，用于控制是否禁用无限滚动功能。在这里，loading是一个布尔值，用于表示是否正在加载数据。当loading为true时，禁用无限滚动功能。
	infinite-scroll-distance="10":
	这是一个属性，用于设置触发无限滚动的距离阈值。在这里，10表示距离底部多少像素时触发无限滚动。
	 -->
  </div>
</template>
<script>
import { IncomeList } from "@/api/cs_api"; //接口方法
import infiniteScroll from 'vue-infinite-scroll'; //引入插件
export default {
  //需要这样注册下 infiniteScroll
  directives: {
    infiniteScroll
  },
  data() {
    return {
      listData: [],
      loading: false, // 是否正在加载数据
      current: 1, // 当前页码
      size: 10, // 每页显示的数据数量
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    // 分页加载更多数据的方法，这里用了 就不需要再到 created 执行getIncomeList 方法了
    loadMore() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      Toast.loading({
        message: this.$t('加载中...'),
        forbidClick: true,
        loadingType: 'spinner',
        duration: 50
      });
      this.getIncomeList(); //列表数据
    },
    // 获取列表方法
    async getIncomeList() {
      try {
        let data = {'请求参数'};
        let res = await IncomeList(data);
        this.listData = [...this.listData, ...res.data.records]; //res.data.records 根据接口实际情况来定
        this.loading = false;
        this.current++;
        if (res.data.records.length < this.size) { //判断是否为最后一页
          this.loading = true;
        }
      } catch (e) {
        //TODO handle the exception
      }
    }

  },
}
</script>