vue.js에서 기본적으로 무선 스크롤을 구현하는 방법

Vue.component('infinite-scroll', {
  data() {
    return {
      items: [],    // 存储所有数据的数组
      nextPage: 1,  // 要加载的下一页索引
      loading: false // 是否在加载数据
    };
  },
  methods: {
    // 加载更多数据
    loadMore() {
      if (this.loading) return;  // 如果已经在加载数据，则返回
      this.loading = true;       // 设置为正在加载数据
      fetchData(this.nextPage)   // 调用API获取数据
        .then((newItems) => {
          this.items = this.items.concat(newItems); // 将新加载的数据添加到数组中
          this.nextPage++;  // 增加要加载的下一页索引
          this.loading = false;  // 设置为未在加载数据
        });
    }
  },
  mounted() {
    this.loadMore();  // 初始化时加载第一页数据
    window.addEventListener('scroll', this.handleScroll); // 添加滚动事件监听器
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 在组件销毁前移除滚动事件监听器
  }
});

mounted() {
  this.loadMore();  // 初始化时加载第一页数据
  window.addEventListener('scroll', this.handleScroll); // 添加滚动事件监听器
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll); // 在组件销毁前移除滚动事件监听器
},
methods: {
  // 处理滚动事件
  handleScroll() {
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (windowHeight + scrollTop >= documentHeight - 100) {
      this.loadMore();
    }
  }
}

methods: {
  // 加载更多数据
  loadMore() {
    if (this.loading) return;  // 如果已经在加载数据，则返回
    this.loading = true;       // 设置为正在加载数据
    fetchData(this.nextPage)   // 调用API获取数据
      .then((newItems) => {
        this.items = this.items.concat(newItems); // 将新加载的数据添加到数组中
        this.nextPage++;  // 增加要加载的下一页索引
        this.loading = false;  // 设置为未在加载数据
      });
  }
}

<!-- 在模板中使用 infinite-scroll 命令 -->
<div v-infinite-scroll="loadMore" class="list">
  <!-- 循环渲染 items 数组中的数据 -->
  <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
  <!-- 显示加载状态 -->
  <div v-if="loading" class="loading">Loading...</div>
</div>

// fetchData 模拟异步获取数据
function fetchData(page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const results = [];
      for (let i = 0; i < 50; i++) {
        results.push({
          id: (page - 1) * 50 + i,
          text: `Item ${(page - 1) * 50 + i}`
        });
      }
      resolve(results);
    }, 1000);
  });
}

const app = new Vue({
  el: &#39;#app&#39;,
  data() {
    return {
      items: [],
      nextPage: 1,
      loading: false
    };
  },
  methods: {
    loadMore() {
      if (this.loading) return;
      this.loading = true;
      fetchData(this.nextPage)
        .then((newItems) => {
          this.items = this.items.concat(newItems);
          this.nextPage++;
          this.loading = false;
        });
    }
  },
});