#鸿蒙通关秘籍#如何实现HarmonyOS Swiper组件的页面高度自适应变化？

为了实现Swiper组件中每个页面的高度随内容自适应变化，可以通过以下步骤完成：

1. 生成Swiper页面： 定义四个Swiper页面，设置其中内容的高度可变。在Swiper初始化内调用GridBuilderFunction生成页面。

   Swiper() {
     Column() {
       Stack() {
         Text('功能栏')
           .textAlign(TextAlign.Center)
           .margin({ top: $r('app.integer.margin_small'), left: $r('app.integer.default_padding') })
         // swiper第一个page
         this.GridBuilderFunction(this.dataPageOne, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
       }
       .alignContent(Alignment.TopStart)
     }
   
     // swiper第二个page
     this.GridBuilderFunction(this.dataPageTwo, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
     // swiper第三个page
     this.GridBuilderFunction(this.dataPageThree, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
     // swiper第四个page
     this.GridBuilderFunction(this.dataPageFour, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.

   复制

2. 处理滑动回调： 使用onGestureSwipe处理滑动事件，根据滑动的程度调整页面高度。

   Swiper{
     ...
   }
   .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
     animateTo({
       duration: Const.DURATION,
       curve: Curve.EaseOut,
       playMode: PlayMode.Normal,
       onFinish: () => {
         logger.info('play end');
       }
     }, () => {
       if (index === 0 && extraInfo.currentOffset < 0) {
         this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.SMALL_FONT_SIZE;
       } else if (index === 1 && extraInfo.currentOffset > 0) {
         this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.SMALL_FONT_SIZE - Const.SMALL_FONT_SIZE;
       } else if (index === 2 && extraInfo.currentOffset < 0) {
         this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.GRID_SINGLE_HEIGHT - Const.SMALL_FONT_SIZE;
       } else if (index === 3 && extraInfo.currentOffset > 0) {
         this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.GRID_SINGLE_HEIGHT - Const.SMALL_FONT_SIZE - Const.GRID_SINGLE_HEIGHT;
       }
     })
   })
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.

   复制

3. 平滑过渡效果： 利用onAnimationStart来调整高度变化时的平滑过渡效果。

   Swiper{
     ...
   }
   .onAnimationStart((_: number, targetIndex: number) => {
     animateTo({
       duration: Const.DURATION,
       curve: Curve.EaseOut,
       playMode: PlayMode.Normal,
       onFinish: () => {
         logger.info('play end');
       }
     }, () => {
       if (targetIndex === 0) {
         this.swiperDistance = 0;
       } else if (targetIndex === 1 || targetIndex === 2) {
         this.swiperDistance = -Const.SMALL_FONT_SIZE;
       } else {
         this.swiperDistance = -Const.SMALL_FONT_SIZE - Const.GRID_SINGLE_HEIGHT;
       }
     })
   })
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.

   复制