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. exportdefault{
  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

Props

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

Events

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

Pagination 分页 - 图1