Pagination 分页

引入

  1. import { Pagination } from 'vant';
  3. 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

Props

参数说明类型默认值版本
v-model当前页码Number--
mode显示模式，可选值为 simple multiStringmulti-
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