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

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

原创

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

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #组件化 #移动开发 #鸿蒙开发 #ArkUI #页面布局 #Swiper

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

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

方案：

1.给Swiper组件设置.nextMargin(50).prevMargin(50)属性。
2.给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时，设置上一张图片的缩放值