How to Disable the Swiper component's transition

Read the original article：How to Disable the Swiper component's transition

Context

In a child component, when a user touches a specific area, that area should not allow Swiper switching, while the entire child component should still be allowed to switch.
The child component contains a Scroll component. When touching a specific area, the Swiper should not be allowed to switch, but the area should still support scrolling within the Scroll component.

Description

The challenge is to selectively disable the Swiper's horizontal switching gesture in a specific child component area while maintaining:

1. Vertical scrolling functionality in a nested Scroll component.
2. Horizontal swiping for the rest of the Swiper page.

Without intervention, touch events in the child component would propagate to the parent Swiper, triggering unwanted page switches during horizontal swipes.

The left and right scrolling operations of the Swiper can be disabled using the PanGesture sliding gesture event.

Solution / Approach

Use PanGesture on the component where the Swiper switching effect needs to be blocked to consume the left and right scrolling events.
The code solution is as follows:

@Entry
@Component
struct TestSwiperPage {
  private swiperController: SwiperController = new SwiperController()
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('Forward')
          .width('90%')
          .height('90%')
          .fontColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Scroll() {
          Column() {
            Column() {
              Text('This area cannot be operated normally.').fontColor('#ffffff').fontSize('30vp')
            }
            .height(200)
            .width('100%')
            .backgroundColor('#f1c3c5')
            .gesture(
              PanGesture(this.panOption)
            )

            Column() {
              Text('This area can be operated normally.').fontColor('#ffffff').fontSize('30vp').margin({ top: 200 })
            }.height(2000)
            .width('100%')
            .backgroundColor('#0A59F7')
          }
        }
        .width('90%')
        .height('100%')

        Text('After')
          .width('90%')
          .height('90%')
          .fontColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .interval(3000)
      .autoPlay(false)
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }
}

Output

Key Takeaways

1. Gesture Interception: PanGesture with PanDirection.Left | PanDirection.Right consumes horizontal swipes, stopping event propagation to the Swiper.
2. Isolated Functionality: The blocked area still supports vertical scrolling since PanGesture only captures horizontal events.
3. Minimal Overhead: No complex event handlers needed—declare the gesture once and attach it to the target component.
4. Constraints:
   • This sample supports API version 20 Release and later. This sample supports HarmonyOS 6.0.0 Release SDK and later. This sample must be built and run using DevEco Studio 6.0.0 Release or later.

Written by Dogan Evci