当前位置：首页 > VUE

vue实现下拉分页

2026-02-21 18:13:17VUE

实现下拉分页的基本思路

在Vue中实现下拉分页功能，通常需要结合滚动事件监听、数据分页加载和防抖处理。核心逻辑是当用户滚动到页面底部时，触发加载下一页数据的操作。

核心代码实现

安装必要的依赖（如axios用于数据请求）：

npm install axios

组件模板部分

<template>
  <div class="list-container" @scroll="handleScroll">
    <div v-for="item in list" :key="item.id" class="list-item">
      {{ item.content }}
    </div>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="noMore" class="no-more">没有更多数据了</div>
  </div>
</template>

组件脚本部分

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      noMore: false
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      if (this.loading || this.noMore) return;

      this.loading = true;
      try {
        const res = await axios.get('/api/data', {
          params: {
            page: this.page,
            pageSize: this.pageSize
          }
        });

        if (res.data.length) {
          this.list = [...this.list, ...res.data];
          this.page++;
        } else {
          this.noMore = true;
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      const bottomReached = scrollTop + clientHeight >= scrollHeight - 50;

      if (bottomReached) {
        this.loadData();
      }
    }
  }
};
</script>

样式部分

<style scoped>
.list-container {
  height: 500px;
  overflow-y: auto;
}

.list-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.loading, .no-more {
  padding: 15px;
  text-align: center;
  color: #999;
}
</style>

优化建议

添加防抖处理避免频繁触发滚动事件：

methods: {
  handleScroll: _.debounce(function(e) {
    // 滚动处理逻辑
  }, 200)
}

使用Intersection Observer API实现更高效的滚动检测：

vue实现下拉分页

mounted() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadData();
    }
  });
  observer.observe(this.$refs.loadMore);
}