引入

import Vue from 'vue';
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显示模式,可选值为 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页码改变时触发-


实例演示

07-05 08:58