vue实现无限下拉

Vue 实现无限下拉加载

无限下拉加载是一种常见的优化长列表性能的方案，通过监听滚动事件动态加载数据。以下是基于 Vue 的实现方法：

核心思路

1. 监听滚动事件，判断是否滚动到底部附近
2. 触发数据加载
3. 更新列表数据
4. 防止重复加载

基础实现

<template>
  <div class="infinite-list" @scroll="handleScroll">
    <div v-for="(item, index) in list" :key="index" class="list-item">
      {{ item }}
    </div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      pageSize: 20,
      hasMore: true
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.loading && this.hasMore) {
        this.loadData()
      }
    },
    async loadData() {
      this.loading = true
      try {
        const newData = await this.fetchData(this.page, this.pageSize)
        this.list = [...this.list, ...newData]
        this.page++
        this.hasMore = newData.length === this.pageSize
      } finally {
        this.loading = false
      }
    },
    fetchData(page, pageSize) {
      // 替换为实际API调用
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: pageSize }, (_, i) => `Item ${(page - 1) * pageSize + i + 1}`)
          resolve(data)
        }, 500)
      })
    }
  }
}
</script>

<style>
.infinite-list {
  height: 500px;
  overflow-y: auto;
}
.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.loading {
  padding: 10px;
  text-align: center;
  color: #999;
}
</style>

优化版本（使用IntersectionObserver）

<template>
  <div class="infinite-list">
    <div v-for="(item, index) in list" :key="index" class="list-item">
      {{ item }}
    </div>
    <div ref="loader" class="loader" v-if="hasMore">
      {{ loading ? '加载中...' : '加载更多' }}
    </div>
  </div>
</template>

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

      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.pageSize)
        this.list = [...this.list, ...newData]
        this.page++
        this.hasMore = newData.length === this.pageSize
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用现成的无限滚动组件：

1. vue-infinite-loading:

   npm install vue-infinite-loading

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
    <infinite-loading @infinite="loadData"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'

export default {
  components: { InfiniteLoading },
  data() {
    return {
      list: [],
      page: 1
    }
  },
  methods: {
    async loadData($state) {
      try {
        const newData = await this.fetchData(this.page, 20)
        if (newData.length) {
          this.list.push(...newData)
          this.page++
          $state.loaded()
        } else {
          $state.complete()
        }
      } catch (error) {
        $state.error()
      }
    }
  }
}
</script>

注意事项

• 确保在组件销毁时移除事件监听器或断开Observer
• 对于大量数据考虑使用虚拟滚动(vue-virtual-scroller)提升性能
• 添加防抖处理避免频繁触发加载
• 处理加载失败的情况并提供重试机制
• 移动端需要考虑下拉刷新的交互冲突

以上实现可以根据实际项目需求进行调整和扩展。