メインコンテンツまでスキップ

PageView (페이지뷰) Widget Control

PageViewウィジェットをスクリプトから制御するときに使用するWidget Control(Property · Method · Event)の一覧です。ウィジェットの紹介と使い方はPageViewドキュメントを参照してください。

備考

以下の例のpageviewIDは、キャンバスでPageViewウィジェットに指定した名前(ID)です。スクリプトではwidgetID.memberの形式でアクセスします。

Widget Control一覧

Widget Control種類シグネチャ説明
addMethodadd(): number新しいアイテムを末尾に追加
clearMethodclear()すべてのアイテムを削除
countPropertycount (get/set, number)繰り返しレンダリングするアイテム(ページ)の数
currentPropertycurrent (get/set, number)バインディングスコープとして使用する現在のアイテムのインデックス
selectPropertyselect (get/set, number)選択されたアイテムのインデックス
getCurrentPageMethodgetCurrentPage(): number現在表示中のページインデックスを返す
goToPageMethodgoToPage(page, duration?)指定したインデックスのページへ移動
insertMethodinsert(index)指定した位置にアイテムを挿入
nextPageMethodnextPage(duration?)次のページへ移動
onPageChangedEventonPageChanged = () => { ... }表示中のページが変わったときに実行
onSelectedEventonSelected = (index) => { ... }アイテムをタップしたときに実行
previousPageMethodpreviousPage(duration?)前のページへ移動
removeMethodremove(index)指定したアイテムを削除
setStateMethodsetState(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)を使用できます。共通リファレンスドキュメント(作成予定)を参照してください。