Vant Pagination 分頁(yè)

2022-05-31 13:39 更新

引入

import Vue from 'vue';
import { Pagination } from 'vant';

Vue.use(Pagination);

代碼演示

基礎(chǔ)用法

<van-pagination 
  v-model="currentPage" 
  :total-items="24" 
  :items-per-page="5"
/>
export default {
  data() {
    return  {
      currentPage: 1
    }
  }
}

簡(jiǎn)單模式

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

顯示省略號(hào)

<van-pagination 
  v-model="currentPage" 
  :total-items="125" 
  :show-page-size="3" 
  force-ellipses
/>

API

Props

參數(shù)說(shuō)明類型默認(rèn)值
v-model當(dāng)前頁(yè)碼number-
mode顯示模式,可選值為 simplestringmulti
prev-text上一頁(yè)按鈕文字string上一頁(yè)
next-text下一頁(yè)按鈕文字string下一頁(yè)
page-count總頁(yè)數(shù)number | string根據(jù)頁(yè)數(shù)計(jì)算
total-items總記錄數(shù)number | string0
items-per-page每頁(yè)記錄數(shù)number | string10
show-page-size顯示的頁(yè)碼個(gè)數(shù)number | string5
force-ellipses是否顯示省略號(hào)booleanfalse

Events

事件名說(shuō)明回調(diào)參數(shù)
change頁(yè)碼改變時(shí)觸發(fā)-


實(shí)例演示

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)