Nuxt.js Store大量数据实现滚动加载的技术咨询

嘿，这个滚动加载的需求其实挺常见的，咱们一步步来把它搞定！既然数据已经存在Nuxt的Store里了，核心就是通过监听滚动事件，动态调整显示的数据数量就行。

完整组件代码 #

<template>
  <div class="items-container">
    <!-- 循环显示当前截取的数据 -->
    <div v-for="(item, index) in displayedItems" :key="index" class="item">
      {{ item }}
    </div>
    <!-- 可选的加载提示，提升用户体验 -->
    <div v-if="isLoading" class="loading">正在加载更多...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCount: 50, // 初始显示50条数据
      isLoading: false, // 防止重复触发加载的标记
      loadStep: 50 // 每次滚动加载的条目数
    }
  },
  computed: {
    // 从Store获取全部数据
    allItems() {
      return this.$store.state.items
    },
    // 计算当前需要展示的数据
    displayedItems() {
      // 用slice截取前showCount条
      return this.allItems.slice(0, this.showCount)
    }
  },
  mounted() {
    // 页面挂载后添加滚动监听
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      // 如果正在加载，直接返回，避免重复触发
      if (this.isLoading) return

      // 计算滚动相关的参数
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const windowHeight = window.innerHeight || document.documentElement.clientHeight
      const documentHeight = document.documentElement.scrollHeight

      // 当滚动到距离底部100px的位置时，触发加载（可以调整这个阈值）
      if (scrollTop + windowHeight >= documentHeight - 100) {
        this.loadMore()
      }
    },
    loadMore() {
      // 如果已经显示全部数据，就不再加载
      if (this.showCount >= this.allItems.length) {
        return
      }

      this.isLoading = true

      // 这里加个小延迟模拟加载感（如果是异步请求数据，就替换成对应的action调用）
      setTimeout(() => {
        // 更新显示数量，最多不超过总数据量
        this.showCount = Math.min(this.showCount + this.loadStep, this.allItems.length)
        this.isLoading = false
      }, 300)
    }
  }
}
</script>

<style scoped>
.items-container {
  min-height: 100vh; /* 确保容器高度足够，能触发滚动 */
}
.item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.loading {
  text-align: center;
  padding: 1.5rem;
  color: #666;
}
</style>

关键细节说明 #

• 滚动判断逻辑：通过scrollTop（滚动条距离顶部的距离）、windowHeight（窗口高度）和documentHeight（整个文档的高度）的关系，判断用户是否接近页面底部，触发加载。
• 防重复加载：isLoading标记确保同一时间只有一次加载动作，避免用户快速滚动时多次触发。
• 灵活调整：你可以根据需求修改showCount（初始显示数）和loadStep（每次加载数），也可以调整滚动触发的阈值（比如把100改成50，提前一点触发加载）。
• 内存泄漏预防：在组件销毁时移除滚动监听，避免不必要的性能消耗。

如果之后你需要改成异步从后端加载数据，只需要把loadMore里的setTimeout换成调用Store的action，把新获取的数据拼接到this.$store.state.items里就行，当前的显示逻辑不需要大改~

内容的提问来源于stack exchange，提问作者Ryan H