【HarmonyOS实战开发】基于Swiper的页面布局

最新推荐文章于 2025-09-18 08:22:00 发布

原创

最新推荐文章于 2025-09-18 08:22:00 发布 · 321 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #安卓 #前端

场景一：Swiper页面支持自定义动画

方案：

给Swiper组件设置.nextMargin(50).prevMargin(50)属性。

给Swiper组件添加onChange事件，设置当前this.currentIndex=index，当currentIndex为首页或者尾页时，设置上一张以及下一张图片的缩放值。

核心代码：

.onChange((index) => {

console.info('changeIndex' + index)

this.currentIndex = index

// 设置当前index缩放值为最大值

this.scaleArray[this.currentIndex] = MAX_SCALE;

if (this.currentIndex == 0) {

// 当前index=0时，设置上一张图片的缩放值

this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE

} else

// 当前index不为0时，设置上一张图片的缩放值

{

this.scaleArray[this.currentIndex -1] = MIN_SCALE

}



if (this.currentIndex == this.scaleArray.length - 1) {

// 当index为最后一张图片时，设置下一张图片的缩放值

this.scaleArray[0] = MIN_SCALE

} else

// 当index不为最后一张时,设置上一张图片的缩放值

{

this.scaleArray[this.currentIndex + 1] = MIN_SCALE

}

})

设置Swiper组件的.displayMode(SwiperDisplayMode.STRETCH)使其Swiper滑动一页的宽度为Swiper组件自身的宽度，如果displayMode属性为SwiperDisplayMode.AUTO_LINEAR时，customContentTransition接口不生效。

给Swiper添加cus