实现一个图片浏览器的功能,参考代码来自:
https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/imageviewer
但是存在一个问题,Swiper组件和内部的swiper手势冲突了,导致Swiper组件无法滑动换图。
处理方式,Swiper组件增加.shouldBuiltInRecognizerParallelWith
处理,这样保证了父组件和子组件的滑动都能同时出发,参考如下:
js
.shouldBuiltInRecognizerParallelWith((current: GestureRecognizer, others: Array<GestureRecognizer>) => {
for (let i = 0; i < others.length; i++) {
let target = others[i].getEventTargetInfo();
if (target) {
if (target.getId() == "imageItem" && !others[i].isBuiltIn() &&
others[i].getType() ==
GestureControl.GestureType.PAN_GESTURE) { // 找到将要组成并行手势的识别器
return others[i]; // 返回将要组成并行手势的识别器
}
}
}
return undefined;
})
.shouldBuiltInRecognizerParallelWith((current: GestureRecognizer, others: Array<GestureRecognizer>) => {
for (let i = 0; i < others.length; i++) {
let target = others[i].getEventTargetInfo();
if (target) {
if (target.getId() == "imageItem" && !others[i].isBuiltIn() &&
others[i].getType() ==
GestureControl.GestureType.PAN_GESTURE) { // 找到将要组成并行手势的识别器
return others[i]; // 返回将要组成并行手势的识别器
}
}
}
return undefined;
})
另外,实现图片没有缩放的时候,支持滑动切换图片;如果有缩放,禁用swiper,需调整如下代码:
js
// ...
this.isEnableSwipe = this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue
this.imageScaleInfo.stash();
}),
PanGesture({ fingers: 1 })
// ....
// ...
this.isEnableSwipe = this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue
this.imageScaleInfo.stash();
}),
PanGesture({ fingers: 1 })
// ....
最终效果如下: