1.简介

该模块利用vue的mixin混入特性，编写了获取移动端手势相关信息的能力。

2.核心功能

手势信息

• 方向 direction
• 滑动的绝对距离 offset
• 带正负号手势滑动距离 deltaX和deltaY

3.源码简读

touch.js 详细可以从vant源码库获取

export const TouchMixin = {
    data() {
        return {
            direction: '', // 滑动方向
        };
    },

    methods: {
	// 记录手势的起点信息
        touchStart(event) {
            this.resetTouchStatus();
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
        },
	// 不断更新 滑动的：绝对距离，带正负的距离，滑动方向
        touchMove(event) {
            const touch = event.touches[0];
            this.deltaX = touch.clientX - this.startX;
            this.deltaY = touch.clientY - this.startY;
            this.offsetX = Math.abs(this.deltaX);
            this.offsetY = Math.abs(this.deltaY);
            this.direction =
                this.direction || getDirection(this.offsetX, this.offsetY);
        },
        // 绑定事件的辅助函数
        bindTouchEvent(el) {
            const {onTouchStart, onTouchMove, onTouchEnd} = this;

            on(el, 'touchstart', onTouchStart);
            on(el, 'touchmove', onTouchMove);

            if (onTouchEnd) {
                on(el, 'touchend', onTouchEnd);
                on(el, 'touchcancel', onTouchEnd);
            }
        },
    },
};