Pagination 分页

引入

通过以下方式来全局注册组件,更多注册方式请参考。

基础用法

通过 来绑定当前页码。

  1. <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />

    显示省略号

    设置 force-ellipses 后会展示省略号按钮,点击后可以快速跳转。

    自定义按钮

    通过 prev-textnext-text 等插槽来自定义分页按钮的内容。

    1. <template #prev-text>
    2. <van-icon name="arrow-left" />
    3. </template>
    4. <template #next-text>
    5. <van-icon name="arrow" />
    6. </template>

    Events

    Slots

    样式变量

    组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件