当前位置：首页 > VUE

vue实现翻页效果

2026-02-10 17:44:44VUE

实现翻页效果的基本思路

在Vue中实现翻页效果通常需要结合数据分页和UI组件。核心逻辑包括计算总页数、处理当前页码变化以及动态渲染数据。

使用计算属性处理分页数据

通过计算属性对原始数据进行切片，确保只显示当前页的数据。假设listData是原始数据数组，pageSize是每页显示的数量：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.listData.slice(start, end);
  },
  totalPages() {
    return Math.ceil(this.listData.length / this.pageSize);
  }
}

页码切换方法实现

添加方法处理页码切换事件，包括上一页、下一页和直接跳转：

methods: {
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  },
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
  },
  goToPage(page) {
    this.currentPage = page;
  }
}

模板部分实现

在模板中渲染分页控件和分页数据：

<template>
  <div>
    <!-- 数据展示 -->
    <ul>
      <li v-for="item in paginatedData" :key="item.id">
        {{ item.content }}
      </li>
    </ul>

    <!-- 分页控件 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span v-for="page in totalPages" :key="page">
        <button 
          @click="goToPage(page)"
          :class="{ active: currentPage === page }"
        >
          {{ page }}
        </button>
      </span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

使用第三方分页组件

如果需要更复杂的分页功能，可以使用现成的分页组件库：

安装Element UI的分页组件：
```
npm install element-ui
```

在组件中使用：

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

样式优化建议

为分页按钮添加基础样式提升用户体验：

vue实现翻页效果

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}
.pagination button.active {
  background: #409EFF;
  color: white;
  border-color: #409EFF;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}