HarmonyOS鸿蒙Next中Scroll API20图片浏览与Tabs左右滑动冲突的解决办法

参考嵌套场景下拦截内部容器手势，通过 onGestureRecognizerJudgeBegin 进行手势拦截，判断是否滑动到左右边界，决定是否处理手势。解决滑动手势冲突。

@Entry
@Component
struct Index {
  @State currentIndex: number = 0;
  @State selectedIndex: number = 0;
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  controller?: TabsController = new TabsController();
  @State currScale: number = 1;
  private scroller: Scroller = new Scroller();

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(
          this.selectedIndex === index
            ? this.selectedFontColor
            : this.fontColor
        )
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })

      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }
    .width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Green)
        }
        .tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          this.scrollBuilder()
        }
        .tabBar(this.tabBuilder(1, 'image'))

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Brown)
        }
        .tabBar(this.tabBuilder(2, 'brown'))
      }
      .width('100%')
      .height('100%')
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        this.selectedIndex = targetIndex;
      })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  scrollBuilder() {
    Scroll(this.scroller) {
      Image($r('app.media.startIcon'))
        .width('100%')
        .objectFit(ImageFit.Contain)
    }
    .width('100%')
    .height('100%')
    .scrollable(ScrollDirection.FREE)
    .minZoomScale(1)
    .maxZoomScale(2)
    .enableBouncesZoom(true)
    .onDidZoom((scale: number) => {
      this.currScale = scale;
    })
    .onGestureRecognizerJudgeBegin(
      (
        event: BaseGestureEvent,
        current: GestureRecognizer,
        others: Array<GestureRecognizer>
      ): GestureJudgeResult => {

        if (!current) {
          return GestureJudgeResult.CONTINUE;
        }

        if (current.isBuiltIn() && current.getType() === GestureControl.GestureType.PAN_GESTURE) {
          const pan = event as PanGestureEvent;

          // 横向滑动
          const isHorizontal = Math.abs(pan.offsetX) > Math.abs(pan.offsetY);
          if (!isHorizontal) {
            return GestureJudgeResult.CONTINUE;
          }

          // 未放大
          if (this.currScale <= 1) {
            return GestureJudgeResult.REJECT;
          }

          // 当前 scroll 偏移
          const xOffset = this.scroller.currentOffset().xOffset;

          // 左滑
          if (pan.offsetX < 0) {
            // 已经到最右
            if (this.scroller.isAtEnd()) {
              return GestureJudgeResult.REJECT;
            }
          }

          // 右滑
          if (pan.offsetX > 0) {
            // 已经到最左
            if (xOffset <= 0) {
              return GestureJudgeResult.REJECT;
            }
          }

          // 中间区域 Scroll
          return GestureJudgeResult.CONTINUE;
        }

        return GestureJudgeResult.CONTINUE;
      },
      true
    )
  }
}

试过了，没用，场景不一样

设置了，没用

Scroll 图片浏览（如双指缩放平移）与 Tabs 左右滑动的冲突，本质是父容器 Tabs 和子组件 Scroll 横向手势竞争。
最简方案是利用 ArkUI 的 嵌套滚动机制：在 Scroll 上设置 nestedScroll 为 NestedScrollMode.SELF_FIRST 或 SELF_ONLY，当图片未放大到可横向滚动时，Scroll 会把剩余滑动量传递给父级 Tabs，从而在图片边界自然触发选项卡切换，且保持原生动画。无需手动判断手势，代码侵入小。
更直接的方式是动态控制 Tabs 的 scrollable 属性：进入图片浏览模式（如双击放大）时设为 false，退出全屏或恢复原始尺寸时再恢复，彻底屏蔽切换。
关于缩放至极限无震动回调：可监听缩放手势的 onActionEnd，结合当前缩放比例判断是否已达 max/min，然后调用 vibrator 模块触发短震。虽比内置回调稍繁琐，但能保持体验一致。