HarmonyOS开发探索：基于Swiper的页面布局

最新推荐文章于 2025-06-04 21:27:53 发布

原创

最新推荐文章于 2025-06-04 21:27:53 发布 · 1.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #harmonyos #华为 #android #鸿蒙 #鸿蒙开发 #移动开发

场景一：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添加customContentTransition(transition: SwiperContentAnimatedTransition)事件，设置页面移除视窗时超时1000ms下渲染树，然后对视窗内所有页面逐帧回调transition。想要实现显示在视窗内正中间的Index为正常状态，两边的index图片为缩小状态。通过事件回调的proxy获取下面数据，通过滑动的距离来计算滑动过程中图片的缩放值。


.customContentTransition({

// 页面移除视窗时超时1000ms下渲染树

timeout: 1000,

// 对视窗内所有页面逐帧回调transition，在回调中修改opacity、scale、translate、zIndex等属性值，实现自定义动画

transition: (proxy: SwiperContentTransitionProxy) => {

if (this.startSwiperOffset == 0) {

this.startSwiperOffset = proxy.position * proxy.mainAxisLength;

console.info('startSwiperOffset:' + this.startSwiperOffset)

}

console.info('proxy-selectedIndex:' + proxy.selectedIndex + '--index:' +