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 })