How to Monitor the Distance from Both Ends When Swiping with the Swiper Component

#harmonyos #arkts #swiper #ongestureswipe

Read the original article：How to Monitor the Distance from Both Ends When Swiping with the Swiper Component

Requirement Description

When using the Swiper component, there is a need to trigger specific actions when the swipe distance exceeds a certain threshold. Currently, it is not possible to monitor the distance exceeded when swiping beyond the edges.

Background Knowledge

The onGestureSwipe method of the Swiper component can be used to monitor the swipe distance and process during swiping.

Swiper component property introduction:

onGestureSwipe(event:(index: number, extraInfo: SwiperAnimationEvent) => void): This callback is triggered frame by frame during the swipe gesture. For multi-column Swiper, index represents the index of the leftmost component.

Parameter	type	Required	Description
index	number	yes	The index of the currently displayed element.
extraInfo	SwiperAnimationEvent	yes	Animation-related information, returns the displacement of the currently displayed element relative to the starting position of the Swiper along the main axis.

Implementation Steps

Based on the left-right swipe implementation, refer to the following code:

Replace this.getUIContext().getPromptAction().showToast({ message: '> 50' }) with the desired refresh logic:

Code Snippet / Configuration

class MyDataSource implements IDataSource {
  private list: number[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();
  private data: MyDataSource = new MyDataSource([]);
  private isRefresh: boolean = false

  aboutToAppear(): void {
    let list: number[] = [];
    for (let i = 1; i <= 5; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list);
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width('80%')
            .height(80)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(false)
      .interval(4000)
      .loop(false)
      .indicatorInteractive(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow({}, false)
      .curve(Curve.Linear)
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
        if (index === 0) {
          if (extraInfo.currentOffset > 50) {
            if (!this.isRefresh) {
              this.isRefresh = true
              this.getUIContext().getPromptAction().showToast({ message: '> 50' })
            }
          } else {
            this.isRefresh = false
          }
        }
        if (index === this.data.totalCount() - 1) {
          if (extraInfo.currentOffset < -50) {
            this.getUIContext().getPromptAction().showToast({ message: '< -50' })
          }
        }
      })
      .layoutWeight(1) // Make Swiper take up available space
    }
    .margin({ top:36, bottom:36 })
    .width('100%')
    .height('70%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

Test Results

Limitations or Considerations

This example supports API Version 18 Release and above.
This example supports HarmonyOS 5.1.0 Release SDK and above.
This example requires DevEco Studio 5.1.0 Release and above for compilation and runtime.