How to dynamically set the nextMargin property of the Swiper component

Read the original article：How to dynamically set the nextMargin property of the Swiper component

Problem Description

How to adjust the nextMargin property of the Swiper component during runtime to control the margin of the next page in Swiper?

Background Knowledge

• nextMargin: Set the margin to reveal a small portion of the next item.
• onAnimationStart: This callback is triggered when the transition animation begins.
• animateTo: The interface specifies the transition animations inserted due to state changes caused by closure code.
• duration: Set the animation duration for switching between subcomponents.

Solution

The implementation approach is as follows:

1. To make the animation transition smoother, you can update the index of the current carousel page using the animateTo method in the onAnimationStart callback at the beginning of the transition animation.
2. Set the nextMargin property to control the bottom margin, thereby displaying part of the next item.

Note: To prevent flickering, the duration value in the animateTo parameter must be consistent with the duration value of the Swiper component.

@Entry
@Component
struct SwiperDemo {
  private swiperController: SwiperController = new SwiperController()
  private data: string[] = ['0', '1', '2', '3', '4', '5', '6']
  @State currentIndex: number = 0 // Current Page

  build() {
    Column({ space: 25 }) {
      Swiper(this.swiperController) {
        ForEach(this.data, (item: string, index: number) => {
          Column() {
            Text(item).width(40).height(40).textAlign(TextAlign.Center).fontSize(30)
          }
          .width('100%')
          .height('100%')
          .border({ width: 3, color: '#ff24d8e5' })
        })
      }
      .displayMode(SwiperDisplayMode.STRETCH)
      .displayCount(1) // Set the number of elements displayed within the Swiper window
      .loop(false)
      .index(this.currentIndex)
      .cachedCount(2)
      .indicator(true)
      .duration(500) // Set the animation duration for switching subcomponents
      .nextMargin(this.currentIndex <= 2 ? 50 : 0)
      .curve(Curve.Linear)
      .backgroundColor('#ffbbfce2')
      .onAnimationStart((index: number, targetIndex: number) => {
        this.getUIContext()?.animateTo
        ({
          duration: 500,
          curve: Curve.Linear,
          playMode: PlayMode.Normal,
        }, () => {
          this.currentIndex = targetIndex
        })
      })
    }.width('100%').height('20%').margin({ top: 5 })
  }
}

Q: Why does flickering occur when I modify the current page index in the onChange callback and then dynamically set the next margin using nextMargin?
A: This flickering occurs because the onChange callback is triggered at the end of the animation. It is recommended to modify the current page index in the onAnimationStart callback and then dynamically set the next margin using nextMargin.

Written by Mehmet Emir Ucar