设计思路

通过HarmonyOS开发文档我们可以看到，其为我们提供了细粒度的手势控制能力。我们通过以下策略解决冲突：

1、监听触摸事件（onTouch），记录起始点与移动轨迹； 2、计算滑动角度，判断主方向是横向还是纵向； 3、动态设置 Swiper 的 enabled 属性：仅当判定为横向滑动时启用轮播； 4、利用 gesturePriority 明确手势优先级。

实现步骤

分为4步来实现：

步骤 1：创建基础 UI 结构（Swiper 内嵌可滚动内容） 步骤 2：添加触摸监听，记录起点与移动量 步骤 3：根据滑动方向动态开关 Swiper 步骤 4：优化体验（防抖、边界处理）

完整实现

// entry/src/main/ets/pages/Index.ets
import { SwiperController } from '@ohos/arkui';

@Entry
@Component
struct SwiperScrollConflictSolution {
  private swiperController: SwiperController = new SwiperController();
  @State swiperEnabled: boolean = true; // 控制 Swiper 是否响应滑动
  private touchStartX: number = 0;
  private touchStartY: number = 0;

  // 判断是否为横向主导滑动
  private isHorizontalMove(offsetX: number, offsetY: number): boolean {
    const absX = Math.abs(offsetX);
    const absY = Math.abs(offsetY);
    // 横向位移明显大于纵向（阈值可调）
    return absX > absY && absX > 10; // 10px 防抖
  }

  build() {
    Column() {
      Text('Swiper + List 手势冲突解决方案')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })

      // 外层 Swiper
      Swiper(this.swiperController) {
        ForEach([1, 2, 3], (index: number) => {
          Column() {
            Text(`轮播页 ${index}`)
              .fontSize(20)
              .fontColor(Color.White)
              .padding(10)
              .backgroundColor('#4A90E2')
              .width('100%')

            // 内嵌可滚动列表
            List({ space: 10 }) {
              ForEach(Array.from({ length: 20 }, (_, i) => i + 1), (item: number) => {
                ListItem() {
                  Text(`列表项 ${item} - 页面 ${index}`)
                    .height(60)
                    .fontSize(16)
                    .textAlign(TextAlign.Center)
                    .backgroundColor('#F0F0F0')
                    .borderRadius(8)
                }
              }, (item: number) => item.toString())
            }
            .layoutPattern(ListLayoutPattern.LINEAR)
            .width('100%')
            .height(400)
          }
          .width('100%')
          .height(500)
          // 关键：在此 Column 上监听触摸
          .onTouch((event: TouchEvent) => {
            switch (event.type) {
              case TouchType.Down:
                this.touchStartX = event.touches[0].screenX;
                this.touchStartY = event.touches[0].screenY;
                break;
              case TouchType.Move:
                if (this.touchStartX !== 0 && this.touchStartY !== 0) {
                  const offsetX = event.touches[0].screenX - this.touchStartX;
                  const offsetY = event.touches[0].screenY - this.touchStartY;
                  // 动态启用/禁用 Swiper
                  this.swiperEnabled = this.isHorizontalMove(offsetX, offsetY);
                }
                break;
              case TouchType.Up:
              case TouchType.Cancel:
                // 重置状态
                this.touchStartX = 0;
                this.touchStartY = 0;
                this.swiperEnabled = true; // 恢复默认可滑动
                break;
            }
          })
        }, (index: number) => index.toString())
      }
      .enabled(this.swiperEnabled) // 核心控制点
      .loop(true)
      .duration(300)
      .width('100%')
      .height(500)
      .margin({ bottom: 20 })

      Text('操作提示：\n• 水平滑动 → 切换轮播页\n• 垂直滑动 → 滚动列表内容')
        .fontSize(14)
        .fontColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .width('90%')
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

hitTestBehavior：触摸测试

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-hit-test-behavior#hittestbehavior