How to Allow Tab Swipe in Only One Direction

#harmonyos #arkts #tabscomponent #pangestureoptions

Read the original article：How to Allow Tab Swipe in Only One Direction

Requirement Description

How to make Tabs allow swiping left and prohibit swiping right.

Background Knowledge

scrollable, controls whether tab pages can be switched by sliding. By default, both left and right swipes are supported.
gesture, binds gestures such as TapGesture, LongPressGesture, PanGesture, PinchGesture, RotationGesture, SwipeGesture, etc. PanGestureOptions accepts a direction to constrain recognition.

Implementation Steps

1.Create a PanGestureOptions for the page content with direction: PanDirection.Right — this captures rightward pans, preventing a right-swipe page switch.

    panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Right })

2.Bind .gesture(PanGesture(panOption)) to all TabContent panes except the first (so users can still swipe left to move forward, but cannot swipe right to go back).

    .gesture(PanGesture(this.panOption))

3.Keep normal tab switching (tap on the tab bar) unchanged.

Code Snippet / Configuration

 @Entry
 @Component
 struct TabsExample {
   @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
   private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Right })

   @Builder
   tabBuilder(index: number, name: string) {
     Column() {
       Text(name)
         .fontColor(this.currentIndex === index ? Color.Blue : Color.Black)
         .fontSize(16)
         .lineHeight(22)
         .margin({ top: 16, bottom: 6 })
       Divider()
         .strokeWidth(2)
         .color(Color.Blue)
         .opacity(this.currentIndex === 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, 'Tab1'))

         TabContent() {
           Column().width('100%').height('100%').backgroundColor(Color.Pink)
             .gesture(PanGesture(this.panOption))
         }.tabBar(this.tabBuilder(1, 'Tab2'))

         TabContent() {
           Column().width('100%').height('100%').backgroundColor(Color.Orange)
             .gesture(PanGesture(this.panOption))
         }.tabBar(this.tabBuilder(2, 'Tab3'))

       }
       .vertical(false)
       .barMode(BarMode.Fixed)
       .barWidth(360)
       .barHeight(56)
       .animationDuration(200)
       .onChange((index: number) => {
         this.currentIndex = index
       })
       .width('100%')
       .height(296)
       .margin({ top: 52 })
     }.width('100%')
   }
 }

Test Results

Swiping left → moves to the next tab (default Tabs behavior).
Swiping right ← on non-first tabs is intercepted by PanGesture(direction: Right), so no tab switch occurs (tap on tab bar still works).
Result Preview:

Limitations or Considerations

Nested scrolls: A rightward PanGesture on the TabContent can intercept child scroll views that also need rightward pans; attach the gesture at the correct level or tune gesture priority if required.
Edge/back navigation: On devices using edge-back gestures, ensure your layout doesn’t require right-edge pans for essential actions on these tabs.
Accessibility & discoverability: Consider a small hint (e.g., “Swipe left to continue”) so users understand why right swipe doesn’t work.
Performance: If you handle complex work in pan callbacks, follow gesture performance best practices (e.g., reduce pan recognition distance judiciously only if needed).