参考ページ
docs.nativescript.org
サンプルコード
- タップイベントなどを取得して画面に表示するシンプルなアプリ
<template>
<Page class="page">
<ActionBar title="操作イベント" class="action-bar"></ActionBar>
<GridLayout rows="auto, auto, *">
<Label row="0" class="target" text="Target Area" @tap="onTap"
@doubleTap="onDoubleTap" @longPress="onLongPress"
@swipe="onSwipe" @pan="onPan" @pinch="onPinch"
@rotation="onRotation">
</Label>
<ListView row="2" class="list-group" for="entry in log">
<v-template>
<Label class="m-20" :text="entry.text"></Label>
</v-template>
</ListView>
</GridLayout>
</Page>
</template>
<script>
const SwipeDirection = require("tns-core-modules/ui/gestures")
.SwipeDirection;
export default {
data: () => {
return {
log: []
};
},
methods: {
onTap() {
this.log.unshift({
text: "タップイベント"
});
},
onDoubleTap() {
this.log.unshift({
text: "ダブルタップ"
});
},
onLongPress() {
this.log.unshift({
text: "ロングプレス"
});
},
onSwipe(args) {
let direction =
args.direction == SwipeDirection.down ?
"下" :
args.direction == SwipeDirection.up ?
"上" :
args.direction == SwipeDirection.left ?
"左" :
"右";
this.log.unshift({
text: direction + " のスワイプ"
});
},
onPinch() {
this.log.unshift({
text: "ピッチ"
});
},
onRotation() {
this.log.unshift({
text: "2本の指を使用して画面に触れてから、それらを同時に左または右に回転させます。"
});
}
}
};
</script>
画面