基于Vue2实现滚动过程中数据懒加载

news2024/11/27 21:32:17

在这里插入图片描述

以下为实现滚动懒加载的过程：
1、在data对象中定义了items数组，用于存放已加载的item，loading状态，当前页数page，每页数量pageSize，以及距离底部的阈值threshold。
2、在mounted钩子函数中，首次加载数据调用loadMore方法，并绑定滚动事件。
3、loadMore方法被调用后，将loading状态设为true，模拟异步加载数据，往items数组中push每次固定数量的item，再将loading状态设为false，page加1。
4、handleScroll方法监听滚动事件，获取当前滚动位置scrollTop，视口高度windowHeight，以及文档总高度scrollHeight。如果文档总高度 - (滚动位置 + 视口高度)小于阈值threshold，则触发loadMore方法加载更多数据。
5、beforeDestroy钩子函数解绑滚动事件。

以下代码把loadMore()函数修改为真正的http请求即可，下面代码中使用settimeout模拟生成数据

<template>
  <div style="height: 100px">
    <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 用于存放已加载的 item
      loading: false, // 控制是否展示 loading
      page: 1, // 当前页数
      pageSize: 5, // 每页数量
      threshold: 100, // 距离底部多少像素时触发加载
    };
  },
  mounted() {
    this.loadMore(); // 首次加载数据
    window.addEventListener("scroll", this.handleScroll); // 绑定滚动事件
  },
  methods: {
    loadMore() {
      this.loading = true; // 开启 loading 状态
      // 模拟异步加载数据
      setTimeout(() => {
        for (let i = 0; i < this.pageSize; i++) {
          this.items.push({
            id: this.items.length + 1,
            text: `Item ${this.items.length + 1}`,
          });
        }
        this.loading = false; // 关闭 loading 状态
        this.page++;
      }, 1000);
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; // 获取当前滚动位置
      const windowHeight = window.innerHeight; // 获取视口高度
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; // 获取文档总高度
      if (scrollHeight - (scrollTop + windowHeight) < this.threshold) {
        // 判断是否已滚动到底部
        this.loadMore(); // 触发加载更多
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll); // 解绑滚动事件
  },
};
</script>
<style lang="less" scoped>
.item {
  height: 200px;
}
</style>