This article highlights the new event changeIndex(index: number, animationMode?: SwiperAnimationMode| boolean) added in API 15, which allows setting the animation mode when flipping to a specified page within a swiper component. The default value is SwiperAnimationMode.NO_ANIMATION. There are three types of animation modes available:
- NO_ANIMATION: Flips to the specified page without any animation.
- DEFAULT_ANIMATION: Flips to the specified page with an animation effect.
- FAST_ANIMATION: Quickly flips to a nearby page without animation, then animates to the final target page.
The example provided demonstrates triggering these effects through three buttons. Each button click invokes the changeIndex method with different parameters to switch pages using one of the above animation modes. Specifically:
- Clicking 'NO_ANIMATION 0' will change the index to 0 without any animation.
- Clicking 'DEFAULT_ANIMATION 10' will animate the transition to index 10.
- Clicking 'FAST_ANIMATION 20' first rapidly moves near the target page and then animates to index 20.
These examples show how to apply different animation effects when navigating between pages in a swiper component. The source code for this example can be found in the "Learning HarmonyOS Development with Old Wei" project on GitHub: https://github.com/waylau/harmonyos-tutorial.
Top comments (0)