首先思路:在滑动区域监听事件,记录用户的起始位置,根据用户滑动的坐标判断出用户操作。

<view class="body" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">

新增三个事件,用于监听用户操作

touchStart(event) {
                // 记录触摸起始点的横坐标,纵坐标
                this.startX = event.touches[0].clientX;
                this.startY = event.touches[0].clientY;
            },
            touchMove(event) {
                // 计算滑动距离
                const currentX = event.touches[0].clientX;
                this.deltaX = currentX - this.startX;
                const currentY = event.touches[0].clientY;
                this.deltaY = currentY - this.startY;
            },
            touchEnd() {
                // 判断滑动方向
                if (Math.abs(this.deltaY) <= 100) { 
                    if (this.deltaX > 20) {
                        console.log('向右滑动逻辑', this.deltaX, this.deltaY);
                    } else if (this.deltaX < -20) {
                        console.log('向左滑动逻辑', this.deltaX, this.deltaY);
                    }
                    this.deltaX = 0;//将存储移动距离清空
                    this.deltaY = 0;
                }
            },                

增加Y轴判断,避免用户在上下滑动时触发左右滑动,当上下滑动小于一定距离时,再触发左右切换事件