フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

NativeScript-Vueで操作イベントを取得して画面に表示する

参考ページ

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>

画面

f:id:PX-WING:20210108001502p:plain