How Do You Build a Tab Experience Using Swiper in ArkTS?

Read the original article：How Do You Build a Tab Experience Using Swiper in ArkTS?

Swiper in ArkTS

Introduction

In contemporary mobile application design, delivering a smooth and intuitive tabbed interface is essential for enhancing both usability and user engagement. HarmonyOS facilitates this with its powerful and flexible Swiper component, allowing developers to implement gesture-enabled, swipeable views with minimal effort. This article explores the implementation of tabbed navigation using Swiper in ArkTS, complete with practical examples and modular design best practices.

Why Swiper?

The Swiper container in HarmonyOS provides:

Smooth horizontal paging.
Gesture-enabled transitions between views.
Support for multiple components as individual swipable pages.

Implementing Swiper in the Index File

Once your HarmonyOS project is set up and you have imported the necessary components, it is time to integrate the Swiper container at the entry point of your application.

In this example, the Index component serves as the main screen. It embeds the Swiper component, which hosts two custom tabs: FirstTab and SecondTab. Each of these tabs is structured as a separate component for modularity and clarity.

import FirstTab from '../components/FirstTab';
import SecondTab from '../components/SecondTab';

@Entry
@Component
struct TabPage {
  build() {
    RelativeContainer() {
      Swiper(){
        FirstTab()
        SecondTab()
      }
      .backgroundColor(Color.Black)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }.width('100%')
  }
}

Key Concepts and Implementation Details

What is Swiper()?
The Swiper component in HarmonyOS ArkTS allows horizontal paging between multiple UI components. It is highly responsive and automatically adds swipe gesture support. Each child inside the Swiper becomes a swipeable page.

In this example, FirstTab() and SecondTab() are inserted as children, making each a full-screen, swipeable page.

No additional gesture-handling logic is needed — swipe gestures are handled natively.

Modularity with Components

By encapsulating content within reusable components such as FirstTab and SecondTab, the UI becomes easier to maintain, scale, and test. This modular architecture adheres to clean code principles and separates concerns effectively.

FirstTab: Introductory content with styled text and separators.

SecondTab: Informational text describing the Swiper usage.

This component-based approach enhances maintainability, promotes reuse, and separates concerns.

FirstTab

This component offers an introductory layout with styled text and separators. It serves as a welcome screen, visually presenting the core theme of the Swiper container.

@Component
export default struct FirstTab{
  build() {
      RelativeContainer(){
        Column(){
          Text('Welcome to Training!')
            .fontWeight(FontWeight.Bold)
          Line()
            .height(1)
            .width('50%')
            .backgroundColor(Color.Gray)
            .margin({
              top: 8,
              bottom: 8
            })
          Text('The Swiper')
            .fontWeight(FontWeight.Bold)
          Text('Container')
            .fontColor(Color.Gray)
            .fontSize(12)
            .margin({
              top: 5,
              bottom: 5
            })
          Text('in HarmonyOS')
            .width('50%')
            .height('10%')
            .backgroundColor('#0C2D48')
        }
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Black)
    }
}

SecondTab

This component focuses on explanatory content, offering a concise description of the Swiper’s use in building a tabbed interface, formatted for clarity and emphasis.

@Component
export default struct SecondTab{
  build() {
    RelativeContainer(){
      Text('This article explains how to create a tabbed interface in HarmonyOS using the Swiper component with real code examples.')
        .fontWeight(FontWeight.Bold)
        .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

Swiper in Action

The final screenshot shows the fully functional tabbed navigation in action using the Swiper component. It highlights the smooth horizontal swipe transitions between FirstTab and SecondTab, providing a seamless user experience.

Final Design

Conclusion

In conclusion, using the Swiper component in ArkTS provides a seamless and efficient way to build tabbed navigation in HarmonyOS applications. Its built-in gesture support and modular design patterns enable developers to create user-friendly, responsive interfaces with minimal overhead. Future enhancements might include swipe indicators, lazy-loading content, or programmatic tab control for more dynamic user flows.