浅谈vant框架实现懒加载效果

实现的效果

• 先请求100条小说数据，渲染到页面之中
• 然后下拉加载更多，当到底小说的总章节的时候，那么就把onload事件设置为不可加载状态，并且显示 没有更多数据了！

• vant官网：https://vant-contrib.gitee.io/vant/#/zh-CN/list 先按照list组件的使用引入即可！
  • v-model="loading" 所加载的状态
  • :finished="finished" 加载完成后不再触发load事件
  • finished-text="没有更多了 加载完成的提示文本
  • @load="onLoad" 加载事件

  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in catalogList" :key="item.chapterId" :title="item.chapterName" />
    van-list>

export default {
     
  name: "Catelog",
  data() {
     
    return {
     
      page: 1,
      size: 10,
      num: 0,
      catalogList: [],
      loading: false,
      finished: false,
    };
  },
  created() {
     
    this.getCatalog(); //最初的时候 获取目录的数据
  },
  methods: {
     
    async getCatalog() {
     
      const {
      id: bookId, c_type } = this.$route.query; //对于前面点击 事件 触发的事件！传递来的参数
      //发起请求 获取所有的数据！
      const {
      data } = await this.$request.get(`/category/catalog/${
       bookId}`, {
     
        params: {
     
          page: this.page,
          size: this.size,
          c_type,
        },
      });
      //拿到请求后的数据 res
      let res = data.data[0].data.chapterList[0].volumeList;
      //先把catalogList 存储 获得后的数据 的数组 置空！
      this.catalogList = [];
      //遍历这个res 一千多条的数据 或者全部的数据！
      for (let i = 0; i < res.length; i++) {
     
        this.loading = false; // 加载状态结束
        this.total = data.data[0].data.chapterList[0].volumeList.length;

        if (i < 0 + this.num) {
     
          //若是这个 存储数据的数组里面 没有查询到已经存在的数据 那么就push进去
          if (this.catalogList.indexOf(res[i]) === -1) {
     
            this.catalogList.push(res[i]);
          }
          //当这个i 等于 这个总长度的时候，那么就是代表加载完成，加载完成后不再触发load事件
          if (i === this.total - 1) {
     
            this.finished = true;
          }
        }
      }
    },
    //滚动加载时触发，list组件定义的方法
    onLoad() {
     
      this.page++; //页数的 ++
      this.num += 100; // num的++
      this.getCatalog(); // 调用获取目录的数据
    },
  },
  components: {
     },
};