在HarmonyOS NEXT开发中Swiper嵌套的页面包含Canvas时，如何让Canvas可以响应左右滑动事件，但是不响应上下滑动？

Question

在HarmonyOS NEXT开发中Swiper嵌套的页面包含Canvas时，如何让Canvas可以响应左右滑动事件，但是不响应上下滑动？swiper包含的页面中是一个列表，存在多个Canvas组件和若干其他类型的组件

Answer 1

你可设置canvas禁止左右滑动就行new PanGestureOptions({ direction: PanDirection.Horizontal })
可参考此demo：

@Entry 
@Component 
struct Index47 { 
  private swiperController: SwiperController = new SwiperController() 
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Horizontal }) 
  scroller: Scroller = new Scroller() 
 
  build() { 
    Stack({ alignContent: Alignment.TopStart }) { 
      Scroll(this.scroller) { 
        Column() { 
          Swiper(this.swiperController) { 
            Text('0') 
              .width('100%') 
              .height('60%') 
              .backgroundColor(Color.Gray) 
              .textAlign(TextAlign.Center) 
              .fontSize(30) 
            Text('1') 
              .width('100%') 
              .height('60%') 
              .backgroundColor(Color.Green) 
              .textAlign(TextAlign.Center) 
              .fontSize(30) 
 
            Text('2') 
              .width('100%') 
              .height('60%') 
              .backgroundColor(Color.Pink) 
              .textAlign(TextAlign.Center) 
              .fontSize(30) 
 
            Column() { 
              Canvas(this.context) 
                .width('100%') 
                .height('100%') 
                .backgroundColor('#F5DC62') 
                .onReady(() => { 
                  this.context.strokeRect(50, 50, 200, 150); 
                }) 
                .gesture(PanGesture(this.panOption)) 
                .width('80%') 
                .height('50%') 
            } 
            .width('100%') 
            .height('60%') 
            .backgroundColor(Color.Red) 
          } 
          .loop(false) 
 
          Button('Video', { stateEffect: true, type: ButtonType.Capsule }) 
            .width('80%') 
            .height(40) 
            .margin(40) 
            .onClick(() => { 
            }) 
          Button('Video', { stateEffect: true, type: ButtonType.Capsule }) 
            .width('80%') 
            .height(40) 
            .margin(40) 
            .onClick(() => { 
            }) 
          Button('Video', { stateEffect: true, type: ButtonType.Capsule }) 
            .width('80%') 
            .height(40) 
            .margin(40) 
            .onClick(() => { 
            }) 
          Button('Video', { stateEffect: true, type: ButtonType.Capsule }) 
            .width('80%') 
            .height(40) 
            .margin(40) 
            .onClick(() => { 
            }) 
          Button('Video', { stateEffect: true, type: ButtonType.Capsule }) 
            .width('80%') 
            .height(40) 
            .margin(40) 
            .onClick(() => { 
            }) 
          Button('Video', { stateEffect: true, type: ButtonType.Capsule }) 
            .width('80%') 
            .height(40) 
            .margin(40) 
            .onClick(() => { 
            }) 
        } 
      } 
    } 
    .width('100%') 
    .height('100%') 
  } 
}