Nuxt JS存储加载大量数据

Question

我需要在页面上显示很多项目，1,000个JSON对象，但是，我最初不需要在页面上全部显示它们，只需说50左右，然后随着用户滚动显示更多内容。数据被加载并存储在存储中，并在页面上获取。如果我使用slice，这似乎可以解决问题，但是在滚动时如何显示更多呢？

<template>
  <div>
    <div v-for="(item, index) in items">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    getItems: {
      get() {
        return this.$store.state.items
      }
    }
  }
}
</script>

Answer 1

您可以使用各种virtual-scroll包，例如vue-virtual-scroller或实现此by yourself

Answer 2

您也可以尝试使用此简约演示，但使用分页。只需根据您的要求更新data -> size：

new Vue({
  el: '#myApp',
  data: {
    items: getItems(),
    pageNumber: 0,
    size: 5
  },
  methods: {
    nextPage() {
      this.pageNumber++;
    },
    prevPage() {
      this.pageNumber--;
    }
  },
  computed: {
    pageCount() {
      let length = this.items.length, size = this.size;
      return Math.ceil(length / size);
    },
    pagedData() {
      const start = this.pageNumber * this.size, end = start + this.size;
      return this.items.slice(start, end);
    }
  },
})

function getItems() {
  let data = [];
  for (let i = 0; i < 100; i++) {
    data.push(`This is item #${i+1}`);
  }
  return data;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="myApp" style="padding:2rem;">
  <div v-for="(item, index) in pagedData">
    {{ item }}
  </div>
  <button :disabled="pageNumber === 0" @click="prevPage">Previous</button>
  <button :disabled="pageNumber >= pageCount -1" @click="nextPage">Next</button>
</div>