当对 Swiper 的子控件(比如,Image)执行 translate 与 scale 处理后,Swiper 控件的左右翻页功能就不准了

当对 Swiper 的子控件(比如,Image)执行 translate 与 scale 处理之后,Swiper 控件的左右翻页功能就不准了。甚至,其还概率性地完全不起作用。我们期望的效果是:

(1) 放大 Image 子控件 — 执行 Image 的 scale 操作。

(2) 平移 Image 子控件 — 执行 Image 的 translate 操作。

(3) 当平移 Image 子控件至 图片 边界时,自动衔接 Swiper 父控件的 swipe 翻页操作。

(4) 当 Image 子控件被完全移出视窗区域后,自动重置归位 Image 子控件上的全部变形效果(包括:缩放与平移)和将 Image 子控件 恢复原状。

我想让上述处理逻辑由 Swiper 控件自动执行。

HarmonyOS
2024-10-09 11:55:07
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

实现类似图库图片可放大缩小滑动的效果参考图库源码:https://gitee.com/openharmony/applications_photos/tree/master

关键代码图片Item组件applications_photos/ common / src / main / ets / default /view/PhotoItem.ets

手势处理逻辑:PanGesture…

冲突处理逻辑:

.onTouch((event?: TouchEvent) => {  
  this.dealTouchEvent(event as TouchEvent);  
  this.eventPipeline?.onTouch(event as TouchEvent);  
})

手势管道处理工具:applications_photos/common/src/main/ets/default/model/browser/photo/EventPipeline.ts

设置swiper滑动状态逻辑:

public setSwipeStatus(disable: Boolean): void {  
  this.broadCast.emit(PhotoConstants.SET_DISABLE_SWIPE, [disable]);  
}

整体逻辑是在手势管道中通过事件通知swiper禁用或启用滑动手势。OH当前能力是可以实现的

图片轮播页面:applications_photos/ common / src / main / ets / default /view/PhotoSwiper.ets

分享
微博
QQ
微信
回复
2024-10-09 17:45:12
相关问题
HarmonyOS web控件执行多次问题
492浏览 • 1回复 待解决
HarmonyOS RelativeContainer控件显示问题
367浏览 • 1回复 待解决
请问Image控件是怎样设置网络图片
10363浏览 • 3回复 已解决
HarmonyOS list控件组件复用
386浏览 • 1回复 待解决
图片视频编辑控件问题
274浏览 • 1回复 待解决