uniapp 事件 单击 双击 多次点击 及滑动

<template>
    <view @touchstart="touchstart" @longpress="longpress" @touchend="touchend"></view>
</template>

<script>
export default {
    name: "touch",
    data() {
        return {
            clientlast: null,//开始位置
            touchNum: 0,//点击次数
            touchTime: null,//定时器清除
            longTap: false,//是否是长按
        };
    }
        methods: {
        //开始
        touchstart(event) {
            //记录位置
            this.last = event.changedTouches[0];
        }
            //长按
            longpress(event) {
            this.longTap = true
            //长按事件
        }
            //结束
            touchend(event) {
            //移动角度判断
            getLineAngle(x1, y1, x2, y2) {
                var x = x1 - x2,
                    y = y1 - y2;
                if (!x && !y) {
                    return 0;
                }
                var angle = (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
                return 360 - angle;
            },
            //判断是否长按了
            if (this.longTap) {
                this.longTap = false
            } else {
                let x1 = this.last.clientX
                let y1 = this.last.clientY
                let x2 = event.changedTouches[0].clientX
                let y2 = event.changedTouches[0].clientY
                let lineAngle = this.getLineAngle(x1, y1, x2, y2)
                // 根据夹角判断当前移动的方向
                if (lineAngle > 170 && lineAngle < 190 && lineAngle != 180) {
                    console.log('右滑');
                } else if ((lineAngle > 0 && lineAngle < 10) || (lineAngle > 350 && lineAngle < 360)) {
                    console.log('左滑');
                } else if (lineAngle > 80 && lineAngle < 100 && lineAngle != 90) {
                    console.log('下滑');
                } else if (lineAngle > 260 && lineAngle < 280 && lineAngle != 270) {
                    console.log('上滑');
                } else {
                    //点击事件  单次 双击 多次点击
                    this.touchNum++
                    if (this.touchNum == 0) { } else {
                        if (this.touchNum > 1) {
                            clearTimeout(this.touchTime)
                            //单击事件
                            this.touchTime = setTimeout(() => {
                                this.touchNum = 0
                            }, 250)
                        } else {
                            clearTimeout(this.touchTime)
                            this.touchTime = setTimeout(() => {
                            //双击或则多次点击事件
                                this.touchNum = 0
                            }, 250)
                        }
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss">

</style>