nativescript 的 gesture

nativescript里面的 Gesture

 

Gestures

 

Gestures, such as tap, slide and pinch, allow users to interact with your app by manipulating UI elements on the screen.

 

 

 

1 Tap：

Action: Briefly touch the screen.

Tap in HTML

<GridLayout (tap)="onTap($event)" class="bg-primary p-15 m-15" width="200" height="200">

</GridLayout>

Tap in TypeScript

import { GestureEventData } from "tns-core-modules/ui/gestures";

 

@Component({

moduleId: module.id,

templateUrl: "./tap.component.html"

})

export class TapExampleComponent {

onTap(args: GestureEventData) {

console.log("Tap!");

console.log("Object that triggered the event: " + args.object);

console.log("View that triggered the event: " + args.view);

console.log("Event name: " + args.eventName);

}

}

 

 

2 DoubleTap:

 

Action: Two taps in a quick succession.

Double Tap in HTML

<GridLayout class="bg-primary p-15 m-15" width="200" height="200" (doubleTap)="onDoubleTap($event)">

<Image class="img-rounded" src="res://icon" stretch="none"></Image>

</GridLayout>

Double Tap in TypeScript

import { Component } from "@angular/core";

import { GestureEventData } from "tns-core-modules/ui/gestures";

import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";

 

@Component({

moduleId: module.id,

templateUrl: "./double-tap.component.html"

})

export class DoubleTapExampleComponent {

onDoubleTap(args: GestureEventData) {

console.log("Object that triggered the event: " + args.object);

console.log("View that triggered the event: " + args.view);

console.log("Event name: " + args.eventName);

}

}

 

 

其它：

https://docs.nativescript.org/angular/ui/ng-components/gestures#tap