当前位置：首页 > VUE

vue加载更多实现

2026-02-20 12:42:43VUE

实现 Vue 加载更多功能

在 Vue 中实现加载更多功能通常涉及监听滚动事件或点击按钮触发数据加载。以下是两种常见的实现方式：

滚动监听实现无限加载

通过监听滚动事件，当用户滚动到页面底部时自动加载更多数据。

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      loading: false,
      hasMore: true
    }
  },
  mounted() {
    this.loadItems()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    async loadItems() {
      if (!this.hasMore || this.loading) return

      this.loading = true
      try {
        const newItems = await fetchData(this.page) // 替换为实际API调用
        if (newItems.length === 0) {
          this.hasMore = false
        } else {
          this.items = [...this.items, ...newItems]
          this.page++
        }
      } finally {
        this.loading = false
      }
    },
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const windowHeight = window.innerHeight
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      if (scrollTop + windowHeight >= scrollHeight - 100 && this.hasMore) {
        this.loadItems()
      }
    }
  }
}
</script>

按钮点击加载更多

提供一个"加载更多"按钮，用户点击后加载更多数据。

vue加载更多实现

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <button 
      v-if="hasMore" 
      @click="loadMore" 
      :disabled="loading"
    >
      {{ loading ? '加载中...' : '加载更多' }}
    </button>
    <div v-else>没有更多数据了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      loading: false,
      hasMore: true
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    async loadItems() {
      this.loading = true
      try {
        const newItems = await fetchData(this.page) // 替换为实际API调用
        this.items = newItems
      } finally {
        this.loading = false
      }
    },
    async loadMore() {
      if (!this.hasMore || this.loading) return

      this.loading = true
      try {
        const newItems = await fetchData(this.page + 1) // 替换为实际API调用
        if (newItems.length === 0) {
          this.hasMore = false
        } else {
          this.items = [...this.items, ...newItems]
          this.page++
        }
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

使用第三方库

可以使用现成的无限滚动库如 vue-infinite-loading 简化实现：

安装库：
```
npm install vue-infinite-loading
```

在组件中使用：


<template>
<div>
 <div v-for="item in items" :key="item.id">{{ item.content }}</div>
 <infinite-loading @infinite="loadMore"></infinite-loading>
</div>
</template>

import InfiniteLoading from 'vue-infinite-loading'

export default { components: { InfiniteLoading }, data() { return { items: [], page: 1 } }, methods: { async loadMore($state) { try { const newItems = await fetchData(this.page) // 替换为实际API调用 if (newItems.length) { this.items = [...this.items, ...newItems] this.page++ $state.loaded() } else { $state.complete() } } catch (error) { $state.error() } } } }

```

以上方法可以根据具体需求选择使用，滚动监听适合无限滚动场景，按钮点击则给予用户更多控制权。