目录

PC上不能通过鼠标控制图片滑动

问题现象

PC上的应用，不能通过鼠标控制图片滑动。

背景知识

问题定位

  1. 检查容器是否绑定滑动手势事件。如PanGesture事件。
     Column() {
  Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}
.translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
// 左右滑动触发该手势事件
.gesture(
  PanGesture(this.panOption)
    .onActionStart((event: GestureEvent) => {
      console.info(`Pan start`);
      console.info(`Pan start timeStamp is: ${event.timestamp}`);
    })
)
  2. 确保父容器未阻拦鼠标事件。如父组件设置了hitTestBehavior(HitTestMode.BLOCK_DESCENDANTS)则会阻塞子节点响应触摸测试。

分析结论

  1. 组件未声明支持鼠标拖拽事件。
  2. 父容器阻拦了鼠标事件。

修改建议

  1. 组件未声明支持鼠标拖拽事件：
    • 组件绑定PanGesture事件实现左右滑动。参考示例。
    • 如果是Swiper组件，将disableSwipe设为false。因为Swiper组件内包含了PanGesture拖动手势事件，用于滑动轮播子组件。disableSwipe属性设为true会取消内部的PanGesture事件监听。
  1. 建议启用鼠标事件传递（参考：如何实现事件透传）。