How to implement pull-up to refresh animation in HarmonyOS?

Read the original article：How to implement pull-up to refresh animation in HarmonyOS?

Requirement Description

Implement a pull-up (load more) animation in HarmonyOS using Swiper, since the built-in Refresh component only supports pull-down refresh.

Background Knowledge

• Refresh Component: Supports pull-down refresh but not pull-up.
• Swiper: Provides horizontal and vertical swipe navigation.
• Gesture Detection: .onGestureSwipe() detects swipe gestures and offsets.
• LoadingProgress: Used to display loading animations.
• Custom DataSource: Needed to append new items dynamically.

Implementation Steps

1. Configure Swiper with vertical(true) to allow vertical swipes.
2. Detect gestures using .onGestureSwipe().
3. Check if the user has reached the bottom (index + 1 === totalItems) and swiped past a threshold (currentOffset < -70).
4. If triggered, show a LoadingProgress animation.
5. On animation end, append new data to the custom DataSource.
6. Reset the refresh flag.

Code Snippet / Configuration

.onGestureSwipe((index, extraInfo) => {
  if (index + 1 === totalItems && extraInfo.currentOffset < -70) {
    isShowRefresh = true
  }
})

.onAnimationEnd(() => {
  if (isShowRefresh) {
    // Add new data
    dataSource.addData(...)
    isShowRefresh = false
  }
})

Test Results

• Pull-up at the bottom triggers the refresh animation.
• New data items are appended successfully.
• Loading animation disappears once data is added.

Limitations or Considerations

• This approach is a simulation because HarmonyOS does not natively support pull-up refresh.
• Threshold values like -70 may vary depending on UI requirements.
• Ensure proper state management to avoid multiple triggers.

Related Documents or Links

• Swiper (ArkUI/ArkTS)
• Refresh — pull-down refresh

Written by Omer Basri Okcu