Swipe Event

Swipe event is triggered when the user swipes on a gesture-enabled element. The following table defines the triggered event.

Table of Contents

  1. Swipe Event
  2. Options
  3. Example

Swipe Event

Event Description
swipe Triggered when the user swipes the target element.

Options

Option Type Description
velocity Integer Minimum required velocity before the swipe event is triggered.
orientation String Swipe orientation.

The possible values are vertical and horizontal.
timeThreshold Integer Time threshold for detecting a swipe event.

Example

The following example shows how to use swipe events.

HTML

<div class="ui-page ui-page-active" id="pageSwipe">
	<header class="ui-header">
		<h2 class="ui-title">Swipe Event</h2>
	</header>
	<div id="content" class="ui-content content-padding"></div>
</div>

Javascript

(function() {
	var page = document.getElementById("pageSwipe");
	page.addEventListener("pagebeforeshow", function() {
		var content = document.getElementById("content");
		tau.event.enableGesture(content, new tau.event.gesture.Swipe( {
		   orientation: "horizontal"
		}));

		content.addEventListener("swipe", function(e) {
		   console.log("swipe direction = " + e.detail.direction);
		});
	});
}());