首先思路:在滑动区域监听事件,记录用户的起始位置,根据用户滑动的坐标判断出用户操作。
<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轴判断,避免用户在上下滑动时触发左右滑动,当上下滑动小于一定距离时,再触发左右切换事件
标签:touches,tabs,deltaY,用户,deltaX,滑动,event,uview2 From: https://www.cnblogs.com/Allen-Xiebro/p/18152303