当前位置：首页 > VUE

vue实现无限下拉

2026-01-08 15:04:59VUE

Vue实现无限下拉加载

无限下拉加载是一种常见的前端交互模式，通过监听滚动事件动态加载数据。以下是实现方法：

基础实现方案

安装依赖（如需要）：

npm install lodash.throttle

核心代码示例：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
import throttle from 'lodash.throttle';

export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      hasMore: true
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    handleScroll: throttle(function(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.loading && this.hasMore) {
        this.loadData();
      }
    }, 300),

    async loadData() {
      this.loading = true;
      try {
        const newData = await this.fetchData(this.page);
        this.list = [...this.list, ...newData];
        this.page++;
        this.hasMore = newData.length > 0;
      } finally {
        this.loading = false;
      }
    },

    fetchData(page) {
      // 替换为实际API调用
      return Promise.resolve(
        Array(10).fill(0).map((_,i) => ({
          id: page*10 + i,
          content: `项目 ${page*10 + i}`
        }))
      );
    }
  }
}
</script>

<style>
.scroll-container {
  height: 500px;
  overflow-y: auto;
}
.loading {
  padding: 10px;
  text-align: center;
}
</style>

优化方案

使用Intersection Observer API

更现代的实现方式，性能更好：

<template>
  <div class="container">
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <div ref="loader" class="loader" v-if="hasMore">
      <span v-if="loading">加载中...</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      hasMore: true,
      observer: null
    }
  },
  mounted() {
    this.initObserver();
    this.loadData();
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    initObserver() {
      this.observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !this.loading && this.hasMore) {
          this.loadData();
        }
      });

      this.$nextTick(() => {
        if (this.$refs.loader) {
          this.observer.observe(this.$refs.loader);
        }
      });
    },

    async loadData() {
      this.loading = true;
      try {
        const newData = await this.fetchData(this.page);
        this.list = [...this.list, ...newData];
        this.page++;
        this.hasMore = newData.length > 0;
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>