How to execute a custom method when dragging down after scrolling to the top and dragging up after scrolling to the bottom?

#harmonyos #arkui #scrollcomponent #pangesture

Read the original article：How to execute a custom method when dragging down after scrolling to the top and dragging up after scrolling to the bottom?

Requirement Description

Background Knowledge

Scroll is a scrollable container component that allows content to scroll when the layout size of its child components exceeds the size of the parent component.
- currentOffset retrieves the current offset of the Scroll.
- isAtEnd checks whether the Scroll has reached the bottom.
PanGesture can bind swipe gesture events to components, where the event.offsetY in the gesture callback is positive when swiping from top to bottom, and negative when swiping in the opposite direction.

Implementation Steps

Use PanGesture to bind the pan event to the Scroll, and determine the Scroll position in onActionEnd to perform corresponding processing.

Determine if the Scroll has reached the top and continues to drag down:

Call currentOffset to get the current position of the Scroll. If the Y direction is less than or equal to 0, it has reached the top.
Determine whether to continue dragging down through the event in onActionEnd. If event.offsetY is greater than 0, it indicates continuing to drag down, then perform custom operations.

Determine if the Scroll has reached the bottom and continues to drag up:

Call isAtEnd to determine if the Scroll has reached the bottom.
Determine whether to continue dragging up through the event in onActionEnd. If event.offsetY is less than 0, it indicates continuing to drag up, then perform custom operations.

Code Snippet / Configuration

@Entry
@Component
struct ScrollDemo {
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical })
  private scrollerForScroll: Scroller = new Scroller()

  build() {
    Column() {
      Scroll(this.scrollerForScroll) {
        Image($r('app.media.layered_image'))
          .size({ width: 400, height: 1050 })
      }
      .width('100%')
      .height('100%')
      .edgeEffect(EdgeEffect.Spring)
      .parallelGesture(
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event: GestureEvent) => {
            // This method will be continuously triggered during the sliding process.
          })
          .onActionEnd((event: GestureEvent) => {
            console.info('Pan end')
            // Scroll to the bottom and continue scrolling.
            if (this.scrollerForScroll.isAtEnd() && event.offsetY < 0) {
              console.info("Perform Custom Operation 1")
            }
            // Swipe to the top and continue swiping.
            const offsetRes = this.scrollerForScroll.currentOffset() // Get the current position of Scroll
            if (offsetRes.yOffset <= 0 && event.offsetY > 0) {
              console.info("Perform Custom Operation 2")
            }
          }), GestureMask.Normal)
    }
  }
}