基于 Swiper 的可见边缘卡片轮播（ArkUI）——前后边距与缩放过渡

2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

阅读原创文章：使用滑动容器实现可见边缘卡片轮播（ArkUI）——前边距/后边距 + 缩放过渡

使用滑动容器实现可见边缘卡片轮播（ArkUI）——前边距/后边距 + 缩放过渡

需求描述

实现一个滑动容器，在当前页面露出上一页/下一页项目的一部分，并在滑动时应用缩放动画，即实现卡片轮播效果。

背景知识

• 滑动容器：用于分页水平/垂直滚动的容器。

  • prevMargin：显示上一页的一小部分。
  • nextMargin：显示下一页的一小部分。
  • onGestureSwipe：用户拖动时的每帧回调。
  • onAnimationStart → onChange → onAnimationEnd：动画生命周期。
  • customContentTransition：每帧回调（在拖动和回弹期间），用于设置opacity/scale/translate/zIndex（不透明度/缩放/平移/层级索引）。

  文档：

事件顺序： onGestureSwipe → onAnimationStart → onChange → onAnimationEnd。

实现步骤

方法 A —— 事件组合（手势 + 动画生命周期）

1. 设置 prevMargin/nextMargin，使相邻项目部分可见。
2. 在 onGestureSwipe 中跟踪拖动距离，并计算当前/上一个/下一个项目的缩放比例。
3. 在 onAnimationStart 中，将目标项目的缩放比例吸附至最大值，将相邻项目的缩放比例吸附至最小值。
4. 在 onChange 中更新 currentIndex（当前索引）。
5. 在 onAnimationEnd 中重置辅助变量。

方法 B —— customContentTransition（单一位置处理）

1. 提供数据源和初始 scaleArray（缩放数组）。
2. 在 onChange 中，将选中页面标记为最大值，将相邻页面标记为最小值。
3. 在 customContentTransition.transition(proxy) 中，根据 proxy.selectedIndex/index/position/mainAxisLength（代理.选中索引/索引/位置/主轴长度）计算每帧的当前/下一个/上一个缩放比例。

代码片段 / 配置

事件组合（精简版）

const 
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。