鸿蒙APP实战案例分析——自定义Swiper卡片预览效果实现

📌往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

📃 鸿蒙（HarmonyOS）北向开发知识点记录~

📃 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

📃 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

📃 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

📃 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

📃 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

📃 记录一场鸿蒙开发岗位面试经历~

📃 持续更新中……

---

介绍

本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动效果。

效果图预览

实现思路

本解决方案通过维护所有卡片偏移的数组，实时更新卡片的偏移量，以实现swiper子组件内图片居中展示，两边等长露出。

1. 左右露出效果静态实现。

Swiper组件基础视图效果如下。

如果所有子组件卡片大小一样，子组件内卡片居中展示即可实现效果。但是当子组件的卡片大小不一样时，无法通过简单的设置居中布局实现左右的等长露出。
此时需要计算当前状态下的卡片的偏移量。

  /**
   * 计算指定卡片的最大偏移量。
   * @param index {number} target card's index.
   * @returns offset value.
   */
  getMaxOffset(index: number): number {
   
    /*
     * 这里的偏移量指相对容器左侧的值。
     * 计算公式为：屏幕宽度 - Swiper两侧突出的偏移量 - 卡片自身的宽度。
     * 此值即为卡片可偏移的最大值，也就是卡片右对齐的状态值。
     * 如果居中，则将最大偏移量 / 2。
     */
    return this.displayWidth - this.cardsList[index].width - 2 * this.swiperMargin;
  }
        
  /**
   * 计算卡片偏移量，并维护偏移量列表。
   * @param targetIndex { number } swiper target card's index.
   */
  calculateOffset(target: number) {
   
    let left = target - 1;
    let right = target + 1;

    // 计算上一张卡片的偏移值
    if (this.isIndexValid(left)) {
   
      this.cardsOffset[left] = this.getMaxOffset(left);
    }
    // 计算当前卡片的偏移值
    if (this