Pagination 分页

引入

  1. import Vue from 'vue';
  2. import { Pagination } from 'vant';
  4. 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