Skip to main content

 

UIを設計する

 

OutSystems

TouchEventsパターン

TouchEventsパターンを使用すると、特定のウィジェットでタッチイベントが有効になります。

TouchEventsを使用してカスタムパターンを作成する方法

event.preventDefault()を呼び出して、各イベントに関連付けられたデフォルトのアクションが実行されないようにすることができます。touchstartイベントとtouchendイベントではこのアクションは不要ですが、touchmoveではユーザーが要素内で指を動かしたときの画面スクロールを停止するためにこのアクションが必要です。

event.preventDefault()を使用するには、以下のコード文字列を使用します。

$parameters.Evt.preventDefault();

スクロールアクション中にヘッダーを非表示にする方法

このパターンを使用して、スクロールアクション中にヘッダーを非表示にすることができます。

1. TouchEventsパターンをLayoutブロックに追加します。

2. Endイベントを追加します。

3. ロジックを追加します。

要素 コード
var header = document.querySelector(".hearder");
header.classList.add("hide");
header.classList.add("header-on-scroll");
var header = document.querySelector(".header");
header.classList.remove("hide");
header.classList.remove("header-on-scroll");

結果:

入力パラメータ

入力名 説明 デフォルト値
WidgetId これは構成するタッチに応答する要素です。 なし

イベント

イベント名 説明 必須
End 移動イベントの完了後にイベントがトリガーされます。 False
Move 移動の開始後にイベントがトリガーされます。 False
Start タッチ移動の開始時にイベントがトリガーされます。 False

他のパターンとの互換性

タッチイベントを使用するパターンをこのパターンと一緒に使用すると衝突が発生する可能性があります(この動作を見込んでコードが変更されている場合は除く)。

サンプル

以下は、TouchEventsパターンを使用したサンプルです。

  • Was this article helpful?