Pagination 分页

引入

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

代码演示

基础用法

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

简单模式

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

显示省略号

  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显示模式,可选值为 simplestringmulti
prev-text上一页按钮文字string上一页
next-text下一页按钮文字string下一页
page-count总页数number | string根据页数计算
total-items总记录数number | string0
items-per-page每页记录数number | string10
show-page-size显示的页码个数number | string5
force-ellipses是否显示省略号booleanfalse

Events

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

Pagination 分页 - 图1