举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > vant分页组件 Vant Pagination 分页

vant分页组件 Vant Pagination 分页

2023-04-07 04:18 Vant中文教程

vant分页组件 Vant Pagination 分页

vant分页组件 Vant Pagination 分页

vant分页组件

引入

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页码改变时触发-


实例演示

阅读全文
以上是编程学为你收集整理的vant分页组件 Vant Pagination 分页全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部