Skip to main content

 

 

 

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

Touch Events

Touch Events UIパターンを使用すると、特定のウィジェットでタッチイベントを有効にできます。

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

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

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

$parameters.Evt.preventDefault();

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

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

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

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

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

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

要素 コード
var header = document.querySelector(".header");
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");

Result

プロパティ

プロパティ 説明
WidgetId これは構成するタッチに応答する要素です。

他のパターンとの互換性

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

サンプル

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

  • Was this article helpful?