Pagination 分页 - Vant 4

📄 Pagination 分页

🎯 介绍

Pagination 组件用于数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。让大量数据展示更加清晰有序！

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Pagination } from 'vant';

const app = createApp();
app.use(Pagination);

🎯 代码演示

🔧 基础用法

通过 v-model 来绑定当前页码，就像翻阅一本精彩的书籍 📖

html

<template>
  <div class="demo-pagination">
    <van-pagination 
      v-model="currentPage" 
      :total-items="24" 
      :items-per-page="5" 
      @change="onPageChange"
    />
    <p class="current-info">当前第 {{ currentPage }} 页</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onPageChange = (page) => {
      showToast(`跳转到第 ${page} 页`);
    };
    
    return { 
      currentPage,
      onPageChange
    };
  },
};
</script>

<style>
.demo-pagination {
  padding: 20px;
}
.current-info {
  margin-top: 10px;
  text-align: center;
  color: #666;
}
</style>

🎨 简单模式

将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮，就像一个简洁的导航指南针 🧭

html

<template>
  <div class="demo-simple">
    <van-pagination 
      v-model="currentPage" 
      mode="simple" 
      :page-count="12"
      @change="onSimpleChange"
    />
    <p class="page-info">简洁模式：{{ currentPage }}/12</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onSimpleChange = (page) => {
      console.log(`简单模式切换到第 ${page} 页`);
    };
    
    return { 
      currentPage,
      onSimpleChange
    };
  },
};
</script>

<style>
.demo-simple {
  padding: 20px;
}
.page-info {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}
</style>

显示省略号

设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转，像是给分页器装上了传送门 ⚡

html

<template>
  <div class="demo-ellipses">
    <van-pagination 
      v-model="currentPage" 
      :total-items="125" 
      :show-page-size="5" 
      force-ellipses
      @change="onEllipsesChange"
    />
    <p class="ellipses-info">省略号模式，总共 {{ Math.ceil(125/10) }} 页</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onEllipsesChange = (page) => {
      showToast(`快速跳转到第 ${page} 页 🚀`);
    };
    
    return { 
      currentPage,
      onEllipsesChange
    };
  },
};
</script>

<style>
.demo-ellipses {
  padding: 20px;
}
.ellipses-info {
  margin-top: 10px;
  text-align: center;
  color: #1989fa;
}
</style>

自定义按钮

通过 prev-text、next-text 等插槽来自定义分页按钮的内容，让分页器拥有独特的个性 ✨

html

<template>
  <div class="demo-custom">
    <van-pagination 
      v-model="currentPage" 
      :total-items="50" 
      :show-page-size="5"
      @change="onCustomChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" /> 上一页
      </template>
      <template #next-text>
        下一页 <van-icon name="arrow" />
      </template>
      <template #page="{ number, text, active }">
        <span :class="{ 'custom-page': true, 'active': active }">
          {{ text }}
        </span>
      </template>
    </van-pagination>
    <p class="custom-info">自定义样式分页器</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onCustomChange = (page) => {
      console.log(`自定义分页器切换到第 ${page} 页`);
    };
    
    return { 
      currentPage,
      onCustomChange
    };
  },
};
</script>

<style>
.demo-custom {
  padding: 20px;
}
.custom-page {
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}
.custom-page.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.custom-info {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}
</style>

API

Props

参数	说明	类型	默认值
v-model	当前页码，控制分页器的当前位置 📍	number	-
mode	显示模式，可选值为 `simple`，切换分页器的展示风格 🎨	string	`multi`
prev-text	上一页按钮文字，自定义向前导航的文本 ⬅️	string	`上一页`
next-text	下一页按钮文字，自定义向后导航的文本 ➡️	string	`下一页`
page-count	总页数，定义分页器的总页面数量 📊	number \| string	根据页数计算
total-items	总记录数，数据的总条目数量 📋	number \| string	`0`
items-per-page	每页记录数，控制每页显示的数据条数 📄	number \| string	`10`
show-page-size	显示的页码个数，控制可见页码按钮的数量 🔢	number \| string	`5`
force-ellipses	是否显示省略号，启用快速跳转功能 ⚡	boolean	`false`
show-prev-button `v4.2.1`	是否展示上一页按钮，控制向前导航按钮的显示 👈	boolean	`true`
show-next-button `v4.2.1`	是否展示下一页按钮，控制向后导航按钮的显示 👉	boolean	`true`

Events

事件名	说明	回调参数
change	页码改变时触发，监听用户的分页操作 🔄	page: number

Slots

名称	描述	参数
page	自定义页码，打造个性化的页码按钮 🎯	{ number: number, text: string, active: boolean }
prev-text	自定义上一页按钮文字，个性化向前导航 ⬅️	-
next-text	自定义下一页按钮文字，个性化向后导航 ➡️	-

类型定义

组件导出以下类型定义：

import type { PaginationMode, PaginationProps } from 'vant';

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-pagination-height	40px	分页器高度 📏
--van-pagination-font-size	var(--van-font-size-md)	字体大小 ✏️
--van-pagination-item-width	36px	页码按钮宽度 📐
--van-pagination-item-default-color	var(--van-primary-color)	默认页码颜色 🎨
--van-pagination-item-disabled-color	var(--van-gray-7)	禁用状态颜色 🚫
--van-pagination-item-disabled-background	var(--van-background)	禁用状态背景色 🔒
--van-pagination-background	var(--van-background-2)	分页器背景色 🖼️
--van-pagination-desc-color	var(--van-gray-7)	描述文字颜色 📝
--van-pagination-disabled-opacity	var(--van-disabled-opacity)	禁用状态透明度 👻

📚 相关文档

List 列表 - 无限滚动的数据列表组件 📜
PullRefresh 下拉刷新 - 下拉刷新数据的交互组件 🔄
Button 按钮 - 基础按钮组件，用于自定义分页按钮 🔘
Icon 图标 - 图标组件，美化分页器按钮 ✨
Loading 加载 - 加载状态指示器 ⏳
ConfigProvider 全局配置 - 全局配置组件主题 🎛️

📄 Pagination 分页 ​

🎯 介绍 ​

📦 引入 ​

🎯 代码演示 ​

🔧 基础用法 ​

🎨 简单模式 ​

显示省略号 ​

自定义按钮 ​

API ​

Props ​

Events ​

Slots ​

类型定义 ​

主题定制 ​

样式变量 ​

📚 相关文档 ​

📄 Pagination 分页

🎯 介绍

📦 引入

🎯 代码演示

🔧 基础用法

🎨 简单模式

显示省略号

自定义按钮

API

Props

Events

Slots

类型定义

主题定制

样式变量

📚 相关文档