当前位置：首页 > VUE

vue实现分页加载数据

2026-02-21 12:57:00VUE

Vue实现分页加载数据的方法

基础分页实现

在Vue中实现分页加载数据通常需要结合后端API和前端组件。以下是一个基本实现步骤：

数据准备 定义分页相关的数据变量：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    items: [],
    loading: false
  }
}

获取数据方法 创建一个方法来从API获取分页数据：

methods: {
  fetchData() {
    this.loading = true
    axios.get(`/api/items?page=${this.currentPage}&size=${this.pageSize}`)
      .then(response => {
        this.items = response.data.items
        this.totalItems = response.data.total
      })
      .finally(() => {
        this.loading = false
      })
  }
}

分页组件 使用element-ui或其他UI库的分页组件：

<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="totalItems"
  layout="prev, pager, next">
</el-pagination>

无限滚动分页

对于移动端或需要无限滚动的场景，可以使用以下方法：

监听滚动事件

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

滚动处理逻辑

methods: {
  handleScroll() {
    const scrollPosition = window.innerHeight + window.pageYOffset
    const pageHeight = document.body.offsetHeight - 100

    if (scrollPosition > pageHeight && !this.loading && this.hasMore) {
      this.currentPage++
      this.fetchData()
    }
  }
}

性能优化技巧

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

import { debounce } from 'lodash'

methods: {
  handleScroll: debounce(function() {
    // 滚动逻辑
  }, 200)
}

虚拟滚动 对于大量数据，考虑使用虚拟滚动技术：

<vue-virtual-scroller
  :items="items"
  :item-height="50"
  style="height: 500px">
  <template v-slot="{ item }">
    <!-- 渲染单个项目 -->
  </template>
</vue-virtual-scroller>

缓存策略 实现简单的数据缓存，避免重复请求：

data() {
  return {
    pageCache: {}
  }
},
methods: {
  fetchData() {
    if (this.pageCache[this.currentPage]) {
      this.items = this.pageCache[this.currentPage]
      return
    }
    // 正常请求数据...
  }
}

完整示例代码

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      items: [],
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      axios.get(`/api/items?page=${this.currentPage}&size=${this.pageSize}`)
        .then(response => {
          this.items = response.data.items
          this.totalItems = response.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

这些方法可以根据具体需求进行组合和调整，以适应不同的分页场景。

vue实现分页加载数据