Element-ui 无限滚动 InfiniteScroll 在一次性把数据取回的情况如何使用?

Question

一般情况是滚动触发一次,取回一部分数据,如下代码.
如果一次性把数据取回呢,如何处理 ?

<template>
  <div id="box">
    <div class="box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
        <ul class="list" >
          <li v-for="(i,index) in list" class="list-item" :key="index">{{ i.noticeTitle }}</li>
        </ul>
        <p v-if="loading" style="margin-top:10px;" class="loading">
          <span></span>
        </p>
        <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0,//起始页0
      loading: false,
      totalPages: "",//取后端返回内容的总页数
      list: [] //后端返回的数组
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.count >= this.totalPages - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {
    this.getMessage();
  },
  methods: {
    load() {
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.count += 1; //页数+1
        this.getMessage(); //调用接口，此时页数+1，查询下一页数据
      }, 2000);
    },
    getMessage() {
      let params = {
        pageNumber: this.count,
        pageSize: 10 //每页查询条数
      };
      this.$axios
        .post(
          "https://接口",
          params
        )
        .then(res => {
          console.log(res);
          this.list = this.list.concat(res.data.body.content); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
          this.totalPages = res.data.body.totalPages;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

Answer 1

拿到数据截取一下自己分页，但是这样一次性返回所有数据不太友好,
和向后台请求差不多

<template>
  <div id="box">
    <div class="box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
        <ul class="list" >
          <li v-for="(i,index) in currentPage" class="list-item" :key="index">{{ i.noticeTitle }}</li>
        </ul>
        <p v-if="loading" style="margin-top:10px;" class="loading">
          <span></span>
        </p>
        <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 1,//起始页0
      loading: false,
      totalPages: "",//取后端返回内容的总页数
      list: [], //后端返回的数组
      currentPage: [], // 当前页数据
      pageSize: 10 // 每页数据条数
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.count >= this.totalPages - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {
    this.getMessage();
  },
  methods: {
    load() {
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.count += 1; //页数+1
      }, 2000);
    },
    getMessage() {
      let params = {
        pageNumber: this.count,
        pageSize: '' // 假设pagesize不传值查询所有数据
      };
      this.$axios
        .post(
          "https://接口",
          params
        )
        .then(res => {
          console.log(res);
          this.list = res.data.body.content // 接收所有返回数据
          this.totalPages = Math.ceil(this.list / this.pageSize) // 计算出totolPage
          this.currentPage = this.list.slice((this.count - 1) * this.pageSize, this.count * this.pageSize) // 第一页数据
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  watch: {
    count (val) {
        const currentPage = this.list.slice((val - 1) * this.pageSize, val * this.pageSize)
        this.currentPage = [...this.currentPage, ...currentPage]
    }
  }
};
</script>