文章目录前言效果展示SwipeGesture vs PanGesture实现原理滑动方向的判定角度到方向的转换代码详解状态变量滑动区域SwipeDirection 枚举完整代码实际案例图片轮播翻页下拉关闭列表项左滑删除写在最后前言滑动手势Swipe和拖拽手势Pan看起来很像但用途完全不同。拖拽是按住慢慢移滑动是快速甩一下。SwipeGesture 检测的是快速滑动的方向和速度常用于翻页、切换标签、触发操作等场景。今天来实现一个四方向滑动检测器用户在指定区域滑动界面实时显示滑动方向和次数。效果展示页面上方显示滑动方向和计数。下方有一个绿色的滑动区域用户在里面快速滑动上方的方向文字就会更新向右滑 → “→ 右滑”向左滑 → “← 左滑”向上滑 → “↑ 上滑”向下滑 → “↓ 下滑”SwipeGesture vs PanGesture这两个手势的区别一定要搞清楚维度SwipeGesturePanGesture触发条件快速滑动有速度要求任意速度的拖动提供的数据滑动角度实时偏移量回调频率一次滑动触发一次移动过程中持续触发适用场景翻页、切换、触发操作拖拽定位、滚动手指状态快速滑动后立即抬起按住不放慢慢移动简单说Swipe 是甩Pan 是拖。实现原理滑动方向的判定SwipeGesture的event.angle返回滑动的角度值0-360度我们需要根据角度来判断方向0° - 45° / 315° - 360° → 右滑 45° - 135° → 上滑 135° - 225° → 左滑 225° - 315° → 下滑角度到方向的转换constangleevent.angle??0if(angle45angle135){this.swipeDirection↑ 上滑}elseif(angle135angle225){this.swipeDirection← 左滑}elseif(angle225angle315){this.swipeDirection↓ 下滑}else{this.swipeDirection→ 右滑}用 if-else 链把角度范围映射到四个方向。代码详解状态变量StateswipeDirection:string等待滑动...StateswipeCount:number0两个状态当前滑动方向和总滑动次数。滑动区域Column(){Column(){Text(←→ 在此区域滑动 ←→).fontSize(14).fontColor(#FFFFFF)}.width(100%).height(120).backgroundColor(#4ECDC4).borderRadius(16).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).gesture(SwipeGesture({direction:SwipeDirection.All}).onAction((event:GestureEvent){this.swipeCountconstangleevent.angle??0if(angle45angle135){this.swipeDirection↑ 上滑}elseif(angle135angle225){this.swipeDirection← 左滑}elseif(angle225angle315){this.swipeDirection↓ 下滑}else{this.swipeDirection→ 右滑}}))}.width(100%)SwipeGesture({ direction: SwipeDirection.All })允许四个方向的滑动。onAction在一次完整的滑动后触发一次不像 PanGesture 持续触发。SwipeDirection 枚举值说明SwipeDirection.All所有方向SwipeDirection.Horizontal仅水平左/右SwipeDirection.Vertical仅垂直上/下SwipeDirection.Left仅向左SwipeDirection.Right仅向右SwipeDirection.Up仅向上SwipeDirection.Down仅向下如果只需要检测左右滑动用SwipeDirection.Horizontal就行系统会忽略上下的滑动。完整代码EntryComponentstruct SwipeGesturePage{StateswipeDirection:string等待滑动...StateswipeCount:number0build(){Column(){Column(){Text(滑动手势).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})Column(){Text(this.swipeDirection).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#4D96FF)Text(滑动次数:${this.swipeCount}).fontSize(13).fontColor(#999999).margin({top:4})}.width(100%).padding(20).backgroundColor(#F8F8F8).borderRadius(12).alignItems(HorizontalAlign.Center).margin({bottom:20})Column(){Column(){Text(←→ 在此区域滑动 ←→).fontSize(14).fontColor(#FFFFFF)}.width(100%).height(120).backgroundColor(#4ECDC4).borderRadius(16).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).gesture(SwipeGesture({direction:SwipeDirection.All}).onAction((event:GestureEvent){this.swipeCountconstangleevent.angle??0if(angle45angle135){this.swipeDirection↑ 上滑}elseif(angle135angle225){this.swipeDirection← 左滑}elseif(angle225angle315){this.swipeDirection↓ 下滑}else{this.swipeDirection→ 右滑}}))}.width(100%)Text(支持上下左右四个方向滑动).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}实际案例图片轮播翻页StatecurrentIndex:number0.gesture(SwipeGesture({direction:SwipeDirection.Horizontal}).onAction((event:GestureEvent){constangleevent.angle??0if(angle90||angle270){// 右滑 → 上一张if(this.currentIndex0)this.currentIndex--}else{// 左滑 → 下一张if(this.currentIndexthis.images.length-1)this.currentIndex}}))下拉关闭.gesture(SwipeGesture({direction:SwipeDirection.Down}).onAction((){// 向下滑 → 关闭当前页面router.back()}))列表项左滑删除.gesture(SwipeGesture({direction:SwipeDirection.Left}).onAction((){// 显示删除按钮this.showDeleteButtontrue}))写在最后SwipeGesture是检测快速滑动的专用手势。它提供滑动角度你根据角度判断方向然后在回调里执行对应的业务逻辑。跟PanGesture的区别要记清楚Swipe 是一次性的方向检测Pan 是持续的位移追踪。选对工具交互才能对味。
