h5页面中实现用户左右滑动事件

B站跟着黑马教学视频学的

<template>
    <div>
        <div @touchstart="handelTouchStart" @touchend="handelTouchend" class="newbox"></div>
    </div>
</template>

<script>
export default {
    name: 'vue名',

    props: {

    },
    //数据
    data() {
        return {
            startTime: 0,
            startX: 0,
            startY: 0,
        };
    },
    //方法
    methods: {
        handelTouchStart(e) {
            console.log('按钮', e.changedTouches[0].clientX);
            this.startTime = Date.now()
            this.startX = e.changedTouches[0].clientX;
            this.startY = e.changedTouches[0].clientX;
        },
        handelTouchend(e) {
            console.log('按钮', e.changedTouches[0].clientX);
            let endTime = Date.now()
            let endX = e.changedTouches[0].clientX;
            let endY = e.changedTouches[0].clinetY;
            if (endTime - this.startTime > 2000) { //正常操作不会大于2秒
                return
            }
            let direction = '';
            //如果Y轴移动小于10,证明是上下滑动,所以不做处理
            if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10) {
                direction = endX - this.startX > 0 ? 'right' : 'left'
            }else{
            return
            }

            console.log(direction);
        }
    },
};
</script>

<style>
.newbox {
    margin: 200px 20px 30px 500px;
    width: 400px;
    height: 400px;
    background-color: blue;
}
</style>