yudao/front-end/mall4m/vant/mixins/touch.js

// 使用 `export` 关键字将名为 `touch` 的变量作为模块的导出项，这样其他模块就能引入并使用它。
// `touch` 被赋值为通过 `Behavior` 函数创建的一个行为对象，在微信小程序等框架里，行为对象可被组件引入，以复用其中定义的方法等内容，进而实现相应的触摸交互相关功能。
export const touch = Behavior({
    // `methods` 属性用于定义该行为对象中包含的一系列方法，这些方法可被使用了这个行为的组件所调用，用于处理触摸相关的事件逻辑。
    methods: {
        // 定义名为 `touchStart` 的方法，它接收一个 `event` 参数，该参数包含了触摸开始事件触发时微信小程序传递过来的相关信息。
        // 这个方法通常在触摸操作刚开始时被调用，用于初始化一些与触摸操作相关的变量，以便后续在触摸移动等过程中进行计算和判断。
        touchStart(event) {
            // 从 `event.touches` 数组中获取第一个触摸点的信息（一般在单指触摸情况下就是当前触摸点），并赋值给 `touch` 变量，方便后续获取触摸点的坐标等属性。
            const touch = event.touches[0];
            // 初始化 `direction` 属性为空字符串，表示触摸滑动方向尚未确定，后续会根据触摸移动情况来更新这个值，用于判断是水平滑动还是垂直滑动等情况。
            this.direction = '';
            // 将 `deltaX`（触摸点在 X 轴方向的偏移量）初始化为 0，后续在触摸移动过程中会根据触摸点位置变化来更新该值。
            this.deltaX = 0;
            // 将 `deltaY`（触摸点在 Y 轴方向的偏移量）初始化为 0，同样会在触摸移动时根据实际情况进行更新。
            this.deltaY = 0;
            // 将 `offsetX`（触摸点在 X 轴方向相对起始位置的偏移绝对值）初始化为 0，用于记录触摸移动过程中的偏移情况，方便后续判断滑动方向等操作。
            this.offsetX = 0;
            // 将 `offsetY`（触摸点在 Y 轴方向相对起始位置的偏移绝对值）初始化为 0，作用与 `offsetX` 类似，用于触摸移动相关的逻辑处理。
            this.offsetY = 0;
            // 获取触摸开始时触摸点的 X 轴坐标（相对于浏览器客户端窗口左上角的位置），并赋值给 `startX` 属性，用于后续计算触摸点在 X 轴方向的偏移量等操作。
            this.startX = touch.clientX;
            // 获取触摸开始时触摸点的 Y 轴坐标（相对于浏览器客户端窗口左上角的位置），并赋值给 `startY` 属性，用于后续计算触摸点在 Y 轴方向的偏移量等操作。
            this.startY = touch.clientY;
        },
        // 定义名为 `touchMove` 的方法，同样接收 `event` 参数，该方法会在触摸点在屏幕上移动时被触发，用于实时更新与触摸移动相关的变量，以判断触摸滑动的方向等信息。
        touchMove(event) {
            // 从 `event.touches` 数组中获取当前第一个触摸点的信息（单指触摸时的当前触摸点），赋值给 `touch` 变量，以便获取当前触摸点的坐标。
            const touch = event.touches[0];
            // 计算触摸点在 X 轴方向相对于触摸开始时的偏移量，通过当前触摸点的 X 轴坐标减去触摸开始时的 `startX` 值来得到，并更新 `deltaX` 属性。
            this.deltaX = touch.clientX - this.startX;
            // 计算触摸点在 Y 轴方向相对于触摸开始时的偏移量，用当前触摸点的 Y 轴坐标减去触摸开始时的 `startY` 值，然后更新 `deltaY` 属性。
            this.deltaY = touch.clientY - this.startY;
            // 计算触摸点在 X 轴方向相对于起始位置的偏移绝对值，使用 `Math.abs` 函数获取 `deltaX` 的绝对值，并赋值给 `offsetX` 属性，这有助于后续比较 X 轴和 Y 轴方向的偏移情况来判断滑动方向。
            this.offsetX = Math.abs(this.deltaX);
            // 计算触摸点在 Y 轴方向相对于起始位置的偏移绝对值，通过 `Math.abs` 函数获取 `deltaY` 的绝对值，将结果赋值给 `offsetY` 属性，同样用于滑动方向的判断等逻辑。
            this.offsetY = Math.abs(this.deltaY);
            // 根据 `offsetX` 和 `offsetY` 的大小关系来确定触摸滑动的方向，将结果赋值给 `direction` 属性。
            // 如果 `offsetX`（X 轴方向偏移绝对值）大于 `offsetY`（Y 轴方向偏移绝对值），说明触摸滑动更偏向水平方向，将 `direction` 设置为 `'horizontal'`；
            // 如果 `offsetX` 小于 `offsetY`，表明触摸滑动更偏向垂直方向，把 `direction` 设置为 `'vertical'`；
            // 如果 `offsetX` 和 `offsetY` 相等，意味着滑动方向不太明确或者没有明显的水平或垂直偏向，将 `direction` 设置为空字符串 `''`。
            this.direction =
                this.offsetX > this.offsetY
                    ? 'horizontal'
                    : this.offsetX < this.offsetY
                    ? 'vertical'
                    : '';
        }
    }
});