vue实现分页加载数据

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

基础分页实现

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

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

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

2. 获取数据方法 创建一个方法来从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
         })
     }
   }

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

   

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

无限滚动分页

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

1. 监听滚动事件

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

2. 滚动处理逻辑

   

   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()
       }
     }
   }

性能优化技巧

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

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

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

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

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

   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>

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