前端常用组件——滚动加载

滚动加载

当用户滚动到容器底部时触发checkScroll方法，在该方法中检查是否需要加载更多数据。如果距离底部小于200像素并且没有正在加载数据时，设置loading为true，增加页数，然后调用fetchData方法加载新数据，最后在加载完成后将loading设置为false。组件初始化时会调用fetchData加载初始数据。

<template>
  <div>
    <!-- 滚动容器 -->
    <div class="content" ref="content" @scroll="checkScroll">
      <!-- 显示内容 -->
      <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
    </div>
    <!-- 加载中提示 -->
    <div v-if="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      items: [], // 存储已加载的数据项
      loading: false, // 是否正在加载新数据
      page: 1, // 当前页数
      pageSize: 10, // 每页显示的条目数
    };
  },
  
  methods: {
  
    // 模拟异步加载数据
    fetchData() {
      // 模拟异步请求数据
      setTimeout(() => {
        const newItems = [];
        for (let i = 1; i <= this.pageSize; i++) {
          const id = this.items.length + i;
          newItems.push({ id, text: `Item ${id}` });
        }
        this.items = this.items.concat(newItems);
        this.loading = false; // 加载完成后设置 loading 为 false
      }, 1000); // 等待时长
    },
    
    // 检查滚动并触发加载更多数据
    checkScroll() {
      const content = this.$refs.content;
      // 当滚动到距离底部不足 200px 时，且没有正在加载数据时触发加载更多
      if (
        content.scrollHeight - content.clientHeight - content.scrollTop < 200 &&
        !this.loading
      ) {
        this.loading = true; // 设置 loading 为 true，表示正在加载数据
        this.page++; // 增加页数
        this.fetchData(); // 调用 fetchData 方法加载新数据
      }
    },
  },
  
  mounted() {
    this.fetchData(); // 初始化加载数据
  },
};
</script>

<style scoped>
.content {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  border: 1px solid #eee;
  background-color: #f5f5f5;
  padding: 10px;
  margin: 10px 0;
}

.loading {
  text-align: center;
  margin: 10px 0;
  font-weight: bold;
}
</style>