vant/packages/pagination/zh-CN.md

Pagination 分页

引入

import { Pagination } from 'vant';

Vue.use(Pagination);

代码演示

基础用法

<van-pagination 
  v-model="currentPage" 
  :total-items="24" 
  :items-per-page="5"
/>

export default {
  data() {
    return  {
      currentPage: 1
    }
  }
}

简单模式

<van-pagination 
  v-model="currentPage" 
  :page-count="12"
  mode="simple" 
/>

显示省略号

<van-pagination 
  v-model="currentPage" 
  :total-items="125" 
  :show-page-size="3" 
  force-ellipses
/>

API

Props

参数	说明	类型	默认值	版本
v-model	当前页码	Number	-	-
mode	显示模式，可选值为 simple multi	String	multi	-
total-items	总记录数	Number	0	-
items-per-page	每页记录数	Number	10	-
page-count	总页数	Number	根据页数计算	-
prev-text	上一页	String	上一页	-
next-text	下一页	String	下一页	-
show-page-size	显示的页码个数	Number	5	-
force-ellipses	显示省略号	Boolean	false	-

Events

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