BackTop ページ先頭に戻る - Vant 4
BackTop ページ先頭に戻る
⬆️ 紹介
ページ先頭に戻るコンポーネントは、ユーザーに便利なページナビゲーション体験を提供します！ページの内容が長い場合、一発で先頭に戻ることができ、より快適に閲覧することができます。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { BackTop } from'vant'; const app = createApp(); app.use(BackTop);🎯 コード例
基本的な使い方
右側のサンプルページをスクロールしてください。ページが 200px スクロールすると、右下隅に先頭に戻るボタンが表示されます。スマートな表示、思いやりのある体験！
exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };位置のカスタマイズ
right と bottom 属性を使用して、コンポーネントの右側と下部からの距離を設定します。柔軟な位置調整で、様々なレイアウトニーズに対応！
exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };内容のカスタマイズ
デフォルトスロットを使用して、コンポーネントに表示する内容をカスタマイズします。
exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };スクロールターゲットの設定
target 属性を使用して、スクロールをトリガーするターゲットオブジェクトを設定できます。セレクターまたは HTMLElement を指定できます。
exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };即時スクロール
immediate 属性を設定すると、ページのスクロールプロセスに遷移効果がなくなり、即座に先頭にスクロールします。
API
Props
| パラメータ | 説明 | タイプ | デフォルト値 |
|---|---|---|---|
| target | スクロールをトリガーするターゲットオブジェクト、セレクターまたは DOM 要素を指定可能、デフォルトは最も近い親のスクロールコンテナ | string | HTMLElement | - |
| right | ページ右側からの距離、デフォルトの単位は px | number | string | 30 |
| bottom | ページ下部からの距離、デフォルトの単位は px | number | string | 40 |
| offset | スクロールの高さがこのパラメータの値に達した場合にのみコンポーネントを表示 | number | 200 |
| teleport | マウント先のノードを指定、Teleport コンポーネントの to 属性 と同等 | string | Element | body |
| immediate v4.0.9 | 即座に先頭にスクロールするかどうか | boolean | false | | z-index | コンポーネントの z-index 階層を設定 | number | string | 100 |
Events
| イベント名 | 説明 | コールバックパラメータ |
|---|---|---|
| click | コンポーネントをクリックしたときに発生 | event: MouseEvent |
Slots
| 名前 | 説明 |
|---|---|
| default | ボタンに表示される内容をカスタマイズ |
型定義
コンポーネントは以下の型定義をエクスポートしています：
importtype { BackTopProps, BackTopThemeVars } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは以下の CSS 変数を提供しており、スタイルのカスタマイズに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-back-top-size | 40px | - |
| --van-back-top-icon-size | 20px | - |
| --van-back-top-right | 30px | - |
| --van-back-top-bottom | 40px | - |
| --van-back-top-z-index | 100 | - |
| --van-back-top-text-color | #fff | - |
| --van-back-top-background | var(--van-blue) | - |
📝 まとめ
BackTop ページ先頭に戻るコンポーネントは、ユーザー体験を向上させる思いやりのあるアシスタントです！⬆️ ユーザーが長いページを閲覧する際に、すばやく先頭に戻る便利な方法を提供し、ページナビゲーションをより使いやすくします。スマートな表示ロジックとスムーズなスクロールアニメーションにより、ユーザーに快適な閲覧体験をもたらします。
🎯 主な特徴：
- 🎯 スマート表示：スクロール距離に応じて自動的に表示/非表示
- 📍 柔軟な位置調整：位置とスクロールターゲットのカスタマイズをサポート
- 🎨 個性的なカスタマイズ：内容とスタイルのカスタマイズをサポート
- ⚡ スムーズなアニメーション：滑らかなスクロール遷移効果
- 🚀 即時スクロール：遷移なしの高速戻りをサポート
長いリスト、記事ページ、複雑なフォームなど、あらゆる場面で BackTop がアプリケーションに思いやりのあるナビゲーション体験を追加します！