Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
 
 
OutSystems

Swipe Events

Swipe Events UIパターンを使用すると、特定のウィジェットでスワイプを実行できます。

Swipe Events UIパターンの使用方法

以下の例は、Swipe Events UIパターンを使用して数字を(右へのスワイプで)増やしたり(左へのスワイプで)減らしたりする方法を示しています。

  1. Service StudioのツールボックスでSwipe Eventsを検索します。

    Swipe Eventsウィジェットが表示されます。

  2. ツールボックスから、Stacked Cardsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  3. 画面名を右クリックして[Add Local Variable]を選択し、ローカル変数を追加します。

  4. 新しい変数の名前、データ型、デフォルト値を入力します。この例では、それぞれ「Number」、「Integer」、「0」と入力しています。

  5. 新しい変数をアプリケーション画面のメインコンテンツ領域にドラッグします。

  6. ツールボックスからContainerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、[Properties]タブで名前を入力します。この例では、「SwipeContainer」と入力しています。また、Containerウィジェット内に「Swipe left or right」というテキストを追加しています。

  7. ウィジェットツリーでSwipe Eventsウィジェットを選択し、[Properties]タブの[WidgetId]ドロップダウンで先ほど作成したコンテナのIDを選択します。この例では、[SwipeContainer.Id]を選択しています。

  8. ユーザーが左へのスワイプを実行したときのアクションを設定するため、引き続き[Properties]タブの[SwipeLeft Handler]ドロップダウンで[New Client Action]を選択します。

  9. 実行する左へのスワイプアクションに関連するロジックを割り当てます。この例では、ユーザーが左へのスワイプを実行するたびに数を1ずつ減らします。これを行うには、クライアントアクションにAssignをドラッグし、Variableを「Number」に設定し、Valueに「Number - 1」と入力します。

  10. SwipeRightHandlerについて手順8~9を繰り返し、「Number + 1」と入力して、ユーザーが右へのスワイプを実行したときに数が増えるようにします。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
WidgetId(Text型): 必須 スワイプ可能な要素。
  • Was this article helpful?