Pagination ページネーション - Vant 4

📄 Pagination ページネーション

🎯 紹介

Pagination コンポーネントはデータ量が多すぎる場合に使用し、ページング形式でデータを分割し、一度に一つのページのみをロードします。大量のデータをより明確かつ秩序正しく表示します！

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。

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

const app = createApp();
app.use(Pagination);

🎯 コード例

🔧 基本的な使い方

v-model を使用して現在のページ番号をバインドします。素晴らしい本をページをめくるようなものです 📖

html

<template>
  <div class="demo-pagination">
    <van-pagination 
      v-model="currentPage" 
      :total-items="24" 
      :items-per-page="5" 
      @change="onPageChange"
    />
    <p class="current-info">現在のページ：{{ currentPage }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onPageChange = (page) => {
      showToast(`${page}ページに移動します`);
    };
    
    return { 
      currentPage,
      onPageChange
    };
  },
};
</script>

<style>
.demo-pagination {
  padding: 20px;
}
.current-info {
  margin-top: 10px;
  text-align: center;
  color: #666;
}
</style>

🎨 シンプルモード

mode を simple に設定するとシンプルモードに切り替わります。このモードでは、ページネーションに具体的なページ番号ボタンは表示されません。シンプルなナビゲーションコンパスのようなものです 🧭

html

<template>
  <div class="demo-simple">
    <van-pagination 
      v-model="currentPage" 
      mode="simple" 
      :page-count="12"
      @change="onSimpleChange"
    />
    <p class="page-info">シンプルモード：{{ currentPage }}/12</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onSimpleChange = (page) => {
      console.log(`シンプルモードで${page}ページに切り替わりました`);
    };
    
    return { 
      currentPage,
      onSimpleChange
    };
  },
};
</script>

<style>
.demo-simple {
  padding: 20px;
}
.page-info {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}
</style>

省略記号を表示

force-ellipses を設定すると省略記号ボタンが表示され、クリックすると素早く移動できます。ページネーションにテレポートを装備したようなものです ⚡

html

<template>
  <div class="demo-ellipses">
    <van-pagination 
      v-model="currentPage" 
      :total-items="125" 
      :show-page-size="5" 
      force-ellipses
      @change="onEllipsesChange"
    />
    <p class="ellipses-info">省略記号モード、合計 {{ Math.ceil(125/10) }} ページ</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onEllipsesChange = (page) => {
      showToast(`${page}ページに素早く移動します 🚀`);
    };
    
    return { 
      currentPage,
      onEllipsesChange
    };
  },
};
</script>

<style>
.demo-ellipses {
  padding: 20px;
}
.ellipses-info {
  margin-top: 10px;
  text-align: center;
  color: #1989fa;
}
</style>

ボタンのカスタマイズ

prev-text、next-text などのスロットを使用してページネーションボタンの内容をカスタマイズし、ページネーションに独自の個性を与えます ✨

html

<template>
  <div class="demo-custom">
    <van-pagination 
      v-model="currentPage" 
      :total-items="50" 
      :show-page-size="5"
      @change="onCustomChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" /> 前のページ
      </template>
      <template #next-text>
        次のページ <van-icon name="arrow" />
      </template>
      <template #page="{ number, text, active }">
        <span :class="{ 'custom-page': true, 'active': active }">
          {{ text }}
        </span>
      </template>
    </van-pagination>
    <p class="custom-info">カスタムスタイルのページネーション</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    
    const onCustomChange = (page) => {
      console.log(`カスタムページネーションで${page}ページに切り替わりました`);
    };
    
    return { 
      currentPage,
      onCustomChange
    };
  },
};
</script>

<style>
.demo-custom {
  padding: 20px;
}
.custom-page {
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}
.custom-page.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.custom-info {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}
</style>

API

プロパティ

パラメータ	説明	型	デフォルト値
v-model	現在のページ番号、ページネーションの現在位置を制御 📍	number	-
mode	表示モード、`simple` を選択可能、ページネーションの表示スタイルを切り替え 🎨	string	`multi`
prev-text	前のページボタンのテキスト、前方へのナビゲーションテキストをカスタマイズ ⬅️	string	`上一页`
next-text	次のページボタンのテキスト、後方へのナビゲーションテキストをカスタマイズ ➡️	string	`下一页`
page-count	総ページ数、ページネーションの総ページ数を定義 📊	number \| string	ページ数に応じて計算
total-items	総レコード数、データの総アイテム数 📋	number \| string	`0`
items-per-page	1ページあたりのレコード数、1ページに表示するデータ数を制御 📄	number \| string	`10`
show-page-size	表示するページ番号の数、表示可能なページボタンの数を制御 🔢	number \| string	`5`
force-ellipses	省略記号を表示するかどうか、クイックナビゲーション機能を有効にする ⚡	boolean	`false`
show-prev-button `v4.2.1`	前のページボタンを表示するかどうか、前方ナビゲーションボタンの表示を制御 👈	boolean	`true`
show-next-button `v4.2.1`	次のページボタンを表示するかどうか、後方ナビゲーションボタンの表示を制御 👉	boolean	`true`

イベント

イベント名	説明	コールバック引数
change	ページ番号が変更されたときにトリガー、ユーザーのページング操作を監視 🔄	page: number

スロット

名前	説明	パラメータ
page	ページ番号のカスタマイズ、個性化されたページボタンを作成 🎯	{ number: number, text: string, active: boolean }
prev-text	前のページボタンのテキストをカスタマイズ、個性化された前方ナビゲーション ⬅️	-
next-text	次のページボタンのテキストをカスタマイズ、個性化された後方ナビゲーション ➡️	-

型定義

コンポーネントは以下の型定義をエクスポートします：

import type { PaginationMode, PaginationProps } from 'vant';

テーマカスタマイズ

スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネントを参照してください。

名前	デフォルト値	説明
--van-pagination-height	40px	ページネーションの高さ 📏
--van-pagination-font-size	var(--van-font-size-md)	フォントサイズ ✏️
--van-pagination-item-width	36px	ページ番号ボタンの幅 📐
--van-pagination-item-default-color	var(--van-primary-color)	デフォルトのページ番号の色 🎨
--van-pagination-item-disabled-color	var(--van-gray-7)	無効状態の色 🚫
--van-pagination-item-disabled-background	var(--van-background)	無効状態の背景色 🔒
--van-pagination-background	var(--van-background-2)	ページネーションの背景色 🖼️
--van-pagination-desc-color	var(--van-gray-7)	説明文の色 📝
--van-pagination-disabled-opacity	var(--van-disabled-opacity)	無効状態の透明度 👻

📚 関連文書

List リスト - 無限スクロールのデータリストコンポーネント 📜
PullRefresh プルリフレッシュ - データをプルダウンして更新するインタラクティブコンポーネント 🔄
Button ボタン - 基本的なボタンコンポーネント、ページネーションボタンのカスタマイズに使用 🔘
Icon アイコン - アイコンコンポーネント、ページネーションボタンを美化 ✨
Loading ローディング - ローディング状態インジケータ ⏳
ConfigProvider グローバル設定 - グローバル設定コンポーネントテーマ 🎛️

📄 Pagination ページネーション ​

🎯 紹介 ​

📦 導入 ​

🎯 コード例 ​

🔧 基本的な使い方 ​

🎨 シンプルモード ​

省略記号を表示 ​

ボタンのカスタマイズ ​

API ​

プロパティ ​

イベント ​

スロット ​

型定義 ​

テーマカスタマイズ ​

スタイル変数 ​

📚 関連文書 ​

📄 Pagination ページネーション

🎯 紹介

📦 導入

🎯 コード例

🔧 基本的な使い方

🎨 シンプルモード

省略記号を表示

ボタンのカスタマイズ

API

プロパティ

イベント

スロット

型定義

テーマカスタマイズ

スタイル変数

📚 関連文書