HarmonyOS 鸿蒙Next swiper 手势和pan手势放在一块为什么一直只会触发swiper
HarmonyOS 鸿蒙Next swiper 手势和pan手势放在一块为什么一直只会触发swiper
swiper 手势和pan手势放在一块为什么一直只会触发swiper手势
项目里面同时放了swiper和pan手势,swiper轻扫手势, pan是平移手势,但是不管轻扫还是缓慢平移拖动,都是只触发了pan 手势
项目里面需要的场景:一个滑块,触发翻页有2种方式:1.pan平移时候,平移50%触发翻页,2.swiper轻扫进行翻页
项目里面同时放了swiper和pan手势,swiper轻扫手势, pan是平移手势,但是不管轻扫还是缓慢平移拖动,都是只触发了pan 手势
项目里面需要的场景:一个滑块,触发翻页有2种方式:1.pan平移时候,平移50%触发翻页,2.swiper轻扫进行翻页
2 回复
import { DownloadImage } from './DownloadImage';
import { fileUri } from '[@kit](/user/kit).CoreFileKit';
import { display } from '[@kit](/user/kit).ArkUI';
import { BusinessError } from '[@kit](/user/kit).BasicServicesKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) message: string = 'Hello World';
[@State](/user/State) imagePath: string = ''
[@State](/user/State) rotateAngle: number = 0
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
private time: number = 0
build() {
Column() {
Image(this.imagePath)
.width(100)
.height(100)
Swiper() {
Row()
.backgroundColor(Color.Red)
.width('100%')
.height('100%')
Row()
.backgroundColor(Color.Green)
.width('100%')
.height('100%')
Row()
.backgroundColor(Color.Blue)
.width('100%')
.height('100%')
Row()
.backgroundColor(Color.Yellow)
.width('100%')
.height('100%')
Row()
.backgroundColor(Color.Brown)
.width('100%')
.height('100%')
}
// .itemSpace(10)
.nextMargin(100)
.width('100%')
.height(100)
.displayCount(3)
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
// DownloadImage.downLoadGifImage('https://a3.eastbuy.com/eastbuy-jigsaw-o-service/common/3392296480620670/77736060f0d8f444778a1e8ebe3aa80c_wh1430x2532.jpg?image_process=format,jpg',(imagePath:string)=>{
DownloadImage.downLoadGifImage('https://a3.eastbuy.com/eastbuy-jigsaw-o-service/common/2777012814291010/5767b678fdb67849c1ef2d8f5bb82274_wh885x1200.gif?width=885&height=1200',
(imagePath: string) => {
let uri = fileUri.getUriFromPath(imagePath);
this.imagePath = uri
}, (err: Error) => {
})
})
}
.justifyContent(FlexAlign.Center)
.height('100%')
.width('100%')
.rotate({ angle: this.rotateAngle })
.gesture(
GestureGroup(GestureMode.Exclusive,
PanGesture(this.panOption).onActionStart((event: GestureEvent) => {
console.info('Pan start')
this.time = new Date().getTime()
// new Date()
}).onActionUpdate((event: GestureEvent) => {
if (event) {
}
}).onActionEnd(async (event: GestureEvent) => {
console.info('Pan end')
// 结束时间
// 拿到距
let data = await display.getAllDisplays()
const ratio = (vp2px(Math.abs(event.offsetX)) / data[0].width)
let t = (new Date().getTime() - this.time) / 1000
let v = Math.abs(event.offsetX) / t
console.log(v.toString())
if (ratio < 0.5 && v < 100) {
console.log("不翻")
} else if (ratio <= 0.5 && v > 100) {
console.log("翻")
} else if (ratio >= 0.5) {
console.log("翻")
}
}),
).onCancel(() => {
console.info('sequence gesture canceled')
})
)
}
}
在HarmonyOS鸿蒙Next中,当swiper手势和pan手势同时存在时,由于手势事件的分发与消费机制,可能会导致swiper手势优先触发,而子组件的pan手势无法正常工作。这主要是因为默认情况下,子组件的手势识别优先级高于父组件(swiper)的条件较为有限,通常仅当子组件未处理手势时,父组件才有机会响应。
要解决这个问题,可以尝试以下方法:
- 设置手势优先级:在swiper上设置
priorityGesture
属性,使得swiper在特定手势(如滑动)上具有更高的优先级。这可以通过配置手势识别器的优先级或重写事件处理逻辑来实现。 - 事件拦截与条件判断:在子组件的pan手势事件处理中,加入条件判断逻辑。如果检测到swiper正在滑动,则不处理pan手势事件,从而允许swiper手势正常触发。
通过上述方法,你可以尝试解决HarmonyOS鸿蒙Next中swiper与pan手势的冲突问题。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。