How to create swiper for lite wearable apps?

#harmonyos #swipercomponent #harmonyoslite #huaweimarkuplanguage

Read the original article：How to create swiper for lite wearable apps?

Requirement Description

This requirement aims to create a Swiper component for a Lite project using HML (Huawei Markup Language) along with JavaScript and CSS.
Each page displays different content, and at the bottom, there are dynamic indicator dots to show the active page. When the user changes the page, the active dot updates automatically with a different color and size.

Background Knowledge

This implementation is based on HML for building lightweight apps using JavaScript and CSS:

Swiper: Allows horizontal paging between multiple child views.
Stack: Serves as a container for layering multiple components.
Indicator dots: Reflect the currently active page dynamically.

Key points:

Data binding with dotIndex to highlight the active dot.
Event handling using onchange to detect page changes.
Lifecycle management with onDestroy to clear intervals or timers.

Implementation Steps

Create a Stack container as the main wrapper for the swiper.
Define the Swiper component with properties: index, onchange, indicator, autoplay, loop, and indicatormask.
Add page-container divs inside the Swiper for each page, including text elements for the title and content.
Implement the indicator container with dynamic styling that updates based on dotIndex.
Bind the data object with pageNums, currentIndex, dotIndex, and duration.
Add a change function to update dotIndex when the user swipes.
Ensure proper cleanup using onDestroy to clear any intervals.
Style the components using CSS to ensure correct layout, sizing, and colors for active/inactive dots.

Code Snippet / Configuration

<stack class="container" onswipe="onSwipe">
    <swiper class="page-container" index="{{ index }}" onchange="change" indicator="true" autoplay="false" loop="false"
            indicatormask="true">
        <div class="page-container">
            <text class="pageTitle">Page 1</text>
            <text class="content">Page content 1</text>
        </div>
        <div class="page-container">
            <text class="pageTitle">Page 2</text>
            <text class="content">Page content 2</text>
        </div>
    </swiper>
    <div class="indicator-container">
        <div class="indicator-dot" for="{{ pageNums }}"
             style="background-color: {{ dotIndex === $idx ? '#FFCB74' : '#C4C4C4' }};
                     width: {{ dotIndex === $idx ? '20px' : '10px' }};"></div>
    </div>
</stack>

.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 454px;
  height: 454px;
  justify-content: center;
  align-items: center;
  color: white;
  placeholder-color: black;
}

.pageTitle {
  font-size: 32px;
  margin-top: 6px;
}

.content {
  display: flex;
  width: 86%;
  font-size: 30px;
  color: #BDBDBD;
  justify-content: flex-start;
  padding-top: 32px;
}

.indicator-container {
  width: 100%;
  height: 8%;
  top: 92%;
  align-items: center;
  justify-content: center;
}

.indicator-dot {
  width: 20px;
  height: 10px;
  border-radius: 5px;
  margin: 0 4px;
}

export default {
    data: {
        pageNums: ["1", "2"],
        duration: 0,
        currentIndex: 0,
        dotIndex: 0,
    },
    change(e) {
        this.dotIndex = e.index;
    },
    onDestroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
}

Test Results

Swiping between pages updates the content correctly.
Indicator dots change color and width based on the active page.
No console errors during lifecycle events or page changes.

Limitations or Considerations

New HML pages cannot be called inside the Swiper. All pages must be created inside the div tags within the Swiper component.

DEV Community