vue 实现滚动到页面底部开始加载更多

在Vue中实现滚动到页面底部开始加载更多的功能，可以通过监听窗口的滚动事件来实现。以下是一个简单的示例：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 内容区 -->
    <div class="content">
      <!-- 条目 -->
      <div class="item" v-for="item in items" :key="item">Item {{ item }}</div>
    </div>
    <!-- 加载更多 -->
    <div v-if="isLoadingMore" class="loading-more">Loading...</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: Array.from({ length: 20 }, (_, i) => i + 1), // 初始数据
      isLoadingMore: false // 是否正在加载更多
    };
  },
  methods: {
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = event.target;
      // 检查是否滚动到底部
      if (scrollHeight - (scrollTop + clientHeight) < 10 && scrollWidth - (scrollLeft + clientWidth) < 10) {
        this.loadMore();
      }
    },
    loadMore() {
      if (this.isLoadingMore) return;
      this.isLoadingMore = true;
      // 模拟异步加载数据
      setTimeout(() => {
        const moreItems = Array.from({ length: 20 }, (_, i) => this.items.length + i + 1);
        this.items = [...this.items, ...moreItems];
        this.isLoadingMore = false;
      }, 1000); // 模拟网络请求时间
    }
  }
};
</script>
 
<style>
.scroll-container {
  height: 400px; /* 设置一个固定高度 */
  overflow: auto;
  position: relative;
}
.content {
  height: auto; /* 内容区高度根据条目数量自适应 */
}
.item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
}
.loading-more {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
}
</style>

在这个例子中，.scroll-container 类定义了一个具有固定高度并且可以滚动的容器。当内容滚动到底部时（距离底部10px内），handleScroll 方法会被触发，并调用 loadMore 方法来加载更多数据。loadMore 方法设置 isLoadingMore 为 true 来显示加载中的提示，然后异步模拟加载数据（通过设置一个setTimeout），最后更新数据数组 items，并将 isLoadingMore 重置为 false。