PageView (페이지뷰) Widget Control
PageViewウィジェットをスクリプトから制御するときに使用するWidget Control(Property · Method · Event)の一覧です。ウィジェットの紹介と使い方はPageViewドキュメントを参照してください。
以下の例のpageviewIDは、キャンバスでPageViewウィジェットに指定した名前(ID)です。スクリプトではwidgetID.memberの形式でアクセスします。
Widget Control一覧
| Widget Control | 種類 | シグネチャ | 説明 |
|---|---|---|---|
add | Method | add(): number | 新しいアイテムを末尾に追加 |
clear | Method | clear() | すべてのアイテムを削除 |
count | Property | count (get/set, number) | 繰り返しレンダリングするアイテム(ページ)の数 |
current | Property | current (get/set, number) | バインディングスコープとして使用する現在のアイテムのインデックス |
select | Property | select (get/set, number) | 選択されたアイテムのインデックス |
getCurrentPage | Method | getCurrentPage(): number | 現在表示中のページインデックスを返す |
goToPage | Method | goToPage(page, duration?) | 指定したインデックスのページへ移動 |
insert | Method | insert(index) | 指定した位置にアイテムを挿入 |
nextPage | Method | nextPage(duration?) | 次のページへ移動 |
onPageChanged | Event | onPageChanged = () => { ... } | 表示中のページが変わったときに実行 |
onSelected | Event | onSelected = (index) => { ... } | アイテムをタップしたときに実行 |
previousPage | Method | previousPage(duration?) | 前のページへ移動 |
remove | Method | remove(index) | 指定したアイテムを削除 |
setState | Method | setState(index, callback) | 特定のアイテムのみ更新 |
Property
count
繰り返しレンダリングするアイテム(ページ)の数を読み取り、または設定します。値を設定すると、バインディングされたデータリストがその数に合わせて増減し、再描画されます。
- 種類: Property (get/set)
- 型:
number(整数)
Example
pageviewID.count = 5;
const n = pageviewID.count;
current
バインディングスコープとして使用する現在のアイテムのインデックスを読み取り、または設定します。設定すると、以降のプロパティ書き込みはそのアイテム(行)に対して適用されます。
- 種類: Property (get/set)
- 型:
number(整数、未設定の場合は-1を返します)
Example
pageviewID.current = 2;
select
選択されたアイテムのインデックスを読み取り、または設定します。
- 種類: Property (get/set)
- 型:
number(整数、選択されていない場合は-1を返します)
Example
pageviewID.select = 1;
Method
getCurrentPage
現在表示中のページインデックス(0から開始)を返します。ビューがまだ画面にアタッチされていない場合は、設定された初期ページの値を返します。
- 種類: Method
- Parameters: なし
- Returns:
number- 現在のページインデックス(0-based)
Example
const page = pageviewID.getCurrentPage();
goToPage
指定したインデックスのページへ移動します。
- 種類: Method
- Parameters:
page(number) - 移動先のページインデックス(0-based)duration(number, 省略可, デフォルト300) - スクロールアニメーションの時間(ミリ秒)。0以下の場合は、アニメーションなしですぐに移動します。
- Returns: なし
Example
pageviewID.goToPage(2, 300);
nextPage
次のページへアニメーションしながら移動します。
- 種類: Method
- Parameters:
duration(number, 省略可, デフォルト300) - スクロールアニメーションの時間(ミリ秒) - Returns: なし
Example
pageviewID.nextPage(300);
previousPage
前のページへアニメーションしながら移動します。
- 種類: Method
- Parameters:
duration(number, 省略可, デフォルト300) - スクロールアニメーションの時間(ミリ秒) - Returns: なし
Example
pageviewID.previousPage(300);
add
新しい空のアイテムを末尾に追加して再描画します。
- 種類: Method
- Parameters: なし
- Returns:
number- 新しく追加されたアイテムのインデックス
Example
const i = pageviewID.add();
insert
指定したインデックスに新しい空のアイテムを挿入して再描画します。
- 種類: Method
- Parameters:
index(number) - 挿入する位置 - Returns: なし
Example
pageviewID.insert(0);
remove
指定したインデックスのアイテムを削除して再描画します。インデックスが範囲外の場合は何も行いません。
- 種類: Method
- Parameters:
index(number) - 削除するアイテムのインデックス - Returns: なし
Example
pageviewID.remove(0);
clear
すべてのアイテムを削除して再描画します。
- 種類: Method
- Parameters: なし
- Returns: なし
Example
pageviewID.clear();
setState
指定したアイテムにバインディングスコープを合わせた状態でコールバックを実行し、そのアイテムのみを再描画します。特定のアイテムのバインディングプロパティを更新するときに使用します。
- 種類: Method
- Parameters:
index(number) - 更新するアイテムのインデックスcallback(function) -indexがアクティブなアイテムである間に実行するコールバック
- Returns: なし
Example
pageviewID.setState(0, () => { /* アイテム0のバインディングプロパティを更新 */ });
Event
onPageChanged
表示中のページが変わったとき(スワイプまたはスクリプトによる移動)に実行されます。
- 種類: Event
- ハンドラー: 引数のないコールバック関数
- Returns: なし
Example
pageviewID.onPageChanged = () => {
// ページ切り替え時に実行するコード
};
onSelected
ユーザーがアイテムをタップしたときに実行されます。
- 種類: Event
- ハンドラー:
index(タップしたアイテムのインデックス)を受け取るコールバック関数 - Returns: なし
Example
pageviewID.onSelected = (index) => {
// 選択されたindexを処理
};
共通Widget Control(すべてのウィジェット)
すべてのウィジェットは、setProperty / getProperty / setStylePropertyのような名前ベースの共通Widget Control(Method)を使用できます。共通リファレンスドキュメント(作成予定)を参照してください。