HarmonyNote.TOP鸿蒙开发笔记

Swiper容器手势事件处理及优先级

在ArkUI中,Swiper容器可实现轮播效果,它有默认的手势事件处理,如果想要处理自己的手势事件,可以通过下面代码绑定手势事件:

.gesture(
PanGesture()
.onActionStart((evt: GestureEvent) => {
  // do something
})
.onActionUpdate((event: GestureEvent) => {
  // do something
})
.onActionEnd((evt: GestureEvent) => {
  // do something
})
)

这样绑定手势事件没错,但是会发现事件不会被触发,因为Swiper容器有默认的手势事件,如果想要触发自己的手势事件,可以调用priorityGesture方法来绑定,该方法会提高事件的优先级,注意的是调用priorityGesture绑定事件后,Swiper的默认事件不会被触发。代码示例如下:

.priorityGesture(
PanGesture()
.onActionStart((evt: GestureEvent) => {
  // do something
})
.onActionUpdate((event: GestureEvent) => {
  // do something
})
.onActionEnd((evt: GestureEvent) => {
  // do something
})
)

如果想Swiper处理默认事件的同时,又执行一些触摸事件,可以用onTouch来绑定相关事件。示例代码如下:

Swiper(){
  //some item
}.index($$this.curIndex)
.vertical(true)
.onTouch((evt: TouchEvent) => {
  if(evt.type === TouchType.Down){
    // do something
  }
  if(evt.type === TouchType.Up){
    // do something
  }
})

当在Swiper容器上同时绑定onTouch和onChange事件时,onTouch事件是先于onChange事件触发的,可以利用这个触发顺序做一些特定的逻辑。代码示例如下:

Swiper(){
  //some item
}.index($$this.curIndex)
.vertical(true)
.onTouch((evt: TouchEvent) => {
  // onTouch先触发,onChange后触发
  if(evt.type === TouchType.Down){
    // do something
  }
  if(evt.type === TouchType.Up){
    // do something
  }
}).onChange((_index: number)=>{
  // onTouch先触发,onChange后触发
  // do something
})