当前位置：首页 > VUE

vue实现列表翻页

2026-02-19 20:09:51VUE

使用 Vue 实现列表翻页

分页组件实现

在 Vue 中实现列表翻页通常需要结合分页组件和数据请求逻辑。以下是一个基础实现方案：

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize)
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.allData.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  },
  async created() {
    // 这里替换为实际的数据获取逻辑
    this.allData = await fetchData()
  }
}
</script>

与后端API交互

实际项目中通常需要从后端API获取分页数据：

vue实现列表翻页

methods: {
  async fetchPageData(page) {
    try {
      const response = await axios.get('/api/items', {
        params: {
          page,
          size: this.pageSize
        }
      })
      this.allData = response.data.items
      this.totalCount = response.data.total
    } catch (error) {
      console.error('获取数据失败:', error)
    }
  }
}

使用第三方分页组件

可以考虑使用现成的分页组件如 vue-paginate 或 element-ui 的分页组件：

vue实现列表翻页

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

无限滚动实现

对于移动端或需要流畅滚动体验的场景，可以使用无限滚动：

import InfiniteLoading from 'vue-infinite-loading'

export default {
  components: { InfiniteLoading },
  methods: {
    async loadMore($state) {
      try {
        const newData = await fetchMoreData()
        if (newData.length) {
          this.items.push(...newData)
          $state.loaded()
        } else {
          $state.complete()
        }
      } catch (err) {
        $state.error()
      }
    }
  }
}

性能优化

对于大型数据集，考虑虚拟滚动技术以提高性能：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id">
    <template v-slot="{ item }">
      <div class="item">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>

以上方案可以根据具体项目需求进行组合和调整，实现适合不同场景的列表翻页功能。