DataV:ページカルーセル

パラメーター

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• カルーセル: 複数ページの自動カルーセルを有効にするかどうかを指定します。

• 間隔: ページを回転する間隔。 このパラメーターは、カルーセルをオンにしたときにのみ表示されます。

Data

ページカルーセルウィジェットの [データ] タブには、[データインターフェイス (すべてのページ)] と [データインターフェイス (現在のページ)] が含まれます。

• データインタフェース (全ページ)

  サンプルデータを次の図に示します。

  [
    {
      "id": 0,
      "serieName": "プロジェクト1" 、
      "url": " https://m.aliyun.com/?utm_content=se_1435405 "
    },
    {
      "id": 1,
      "serieName": "プロジェクト2" 、
      "url": " https://hd.m.aliyun.com/act/detail-datav.html "
    },
    {
      "id": 2、
      "serieName": "プロジェクト3" 、
      "url": " https://tianchi.aliyun.com/markets/tianchi/outsource/ai/mobile "
    }
  ]

  表1. パラメーター

  ログフィールド	説明
  id	ウィジェット内のページのID。
  serieName	ウィジェット内のページの名前。
  url	ウィジェット内のページのURL。

• データインタフェース (现在のページ)

  id: ウィジェット内のページのID。

  • 静的データを使用する場合、このidは、カルーセルページの初期化時に表示されるページのみを定義できます。 データインターフェイス (現在のページ) のページidに対応する必要があります。

  • ウィジェットがデータベースやAPIなどの動的データソースを使用している場合、idパラメーターの値は、タイムラインやタブリストなどのインタラクションウィジェットから動的に取得できます。 インタラクションウィジェットの要素を変更して、特定のページに回転させることができます。 動的データによって返されるid値の形式は、このidと一致し、データインターフェイス (現在のページ) のページidに対応している必要があります。

  動的データソースを設定することを推奨します。 詳細については、「ウィジェット操作」および「ティッカーボードのコールバックIDの設定」をご参照ください。

相互連携

このウィジェットはインタラクションイベントをサポートしていません。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. ページの左上隅にあるアイコンをクリックします。

3. ブループリントエディターで、[追加されたノード] ペインで [ページカルーセル] をクリックします。 キャンバスでウィジェットパラメータを設定できます。

   • イベント

     イベント	説明
     データインタフェース (全ページ) 要求完了時	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。
     データインタフェース (カレントページ) 要求完了時	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。
     データインタフェース (全ページ) 要求の失敗時	データインターフェイス要求が失敗した場合 (ネットワークの問題やインターフェイスのエラーなどが原因である可能性があります) 、イベントが返され、フィルターによって処理され、処理されたJSON形式のデータもスローされます。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。
     データインタフェース (カレントページ) の要求	データインターフェイス要求が失敗した場合 (ネットワークの問題やインターフェイスのエラーなどが原因である可能性があります) 、イベントが返され、フィルターによって処理され、処理されたJSON形式のデータもスローされます。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。

   • Action

     Action	説明
     要求データインタフェース (全ページ)	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、ページカルーセルウィジェットはAPIデータソースhttp:// api.testを使用し、Request data Interface (All Pages) アクションに渡されるデータは { id: '1'} です。 その結果、はhttp:// api.test? をします。 id=1 APIを呼び出してデータを要求します。
     要求データインタフェース (現在のページ)	このアクションは、上流のデータ処理ノードまたはウィジェットによって渡されたパラメーターを受け取り、サーバーから現在のページのデータを要求します。 たとえば、ページカルーセルウィジェットはAPIデータソースhttp:// api.testを使用し、Request data Interface (Current page) アクションに渡されるデータは { id: '1'} です。 その結果、はhttp:// api.test? をします。 id=1 APIを呼び出してデータを要求します。
     インポートデータインタフェース (全ページ)	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。
     インポートデータインタフェース (現在のページ)	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。
     現在のページ情報を取得します。	現在のページのidやurlなどのパラメーターの値を返します。
     ウィジェット設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
     非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。
     非表示 /表示	ウィジェットは非表示または表示されます。
     移動	ウィジェットが指定された場所に移動されます。 参照データの例を次に示します。 { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }