Pagination 分页

使用指南

  1. import { Pagination } from 'vant';
  2. Vue.use(Pagination);

代码演示

基础用法

  1. <van-pagination
  2. v-model="currentPage"
  3. :total-items="24"
  4. :items-per-page="5"
  5. />
  1. export default {
  2. data() {
  3. return {
  4. currentPage: 1
  5. }
  6. }
  7. }

简单模式

  1. <van-pagination
  2. v-model="currentPage"
  3. :page-count="12"
  4. mode="simple"
  5. />

显示省略号

  1. <van-pagination
  2. v-model="currentPage"
  3. :total-items="125"
  4. :show-page-size="3"
  5. force-ellipses
  6. />

API

参数 说明 类型 默认值
v-model 当前页码 Number -
mode 显示模式,可选值为 simple multi String multi
items-per-page 每页记录数 Number 10
previous-text 上一页 String 上一页
next-text 下一页 String 下一页
show-page-size 显示的页码个数 Number 5
force-ellipses 显示省略号 Boolean false

Event

事件名 说明 参数
change 页码改变时触发 -

原文:

https://youzan.github.io/vant/#/zh-CN/pagination