• Pagination 分页
    • 引入
  • 代码演示
    • 基础用法
    • 简单模式
    • 显示省略号
  • API
    • Props
    • Events

    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