Swiper 组件实现复杂轮播图
概述
在各类应用和网站中，轮播图的使用非常广泛，它在信息展示和用户交互方面扮演着重要角色。轮播图不仅能在有限的屏幕区域内展示更多内容，还能有效地将关键的信息传递给用户。在开发应用或网站时，可以通过轮播图优先展示重要内容，次要内容则随后呈现，用户能够自主控制浏览节奏，滑动交互也能为用户带来发现内容的愉悦感，从而提升用户体验。
本文将通过以下两个场景介绍如何使用 Swiper 组件实现不同的轮播效果：
- 使用 Swiper 实现图文作品合集：图文作品合集由图片和文字组合而成，通过 Swiper 组件来动态展示图片，实现图片的轮播效果。
- 实现轮播图片叠加效果：轮播图的叠加效果（多层轮播图视觉叠加）可以创造独特的视觉层次和交互体验。
使用 Swiper 实现图文作品合集
场景描述
在一些短视频平台上，经常能看到由图片和文字组合而成的作品集。这些作品集通常由多张图片构成，支持自动轮播或手动切换。
- 当作品自动播放时，图片会每隔几秒自动切换到下一张，且下方的进度条进度与每张图片的停留时间相匹配。
- 当用户主动触发播放操作时，下方进度条会跟着图片的滑动切换而改变成未完成状态或已完成状态。
效果如图所示。
实现原理
图文作品轮播可以通过 Swiper 组件及其指示器的联动效果来实现。由于 Swiper 组件的指示器不可自定义，因此需要分开实现。
图片区域需要使用 Swiper 组件来实现。将图片合集的数据传入 Swiper 组件后，需要对 Swiper 组件设置一些属性，来完成图片自动轮播效果。
- 通过设置 loop 属性控制是否循环播放，该属性默认值为 true。当 loop 为 true 时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果 loop 为 false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
- 通过设置 autoPlay 属性，控制是否自动轮播子组件。该属性默认值为 false。autoPlay 为 true 时，会自动切换播放子组件。
- 通过设置 interval 属性，控制子组件与子组件之间的播放间隔。interval 属性默认值为 3000，单位毫秒。
- 通过设置 indicator 属性为 false，来关闭 Swiper 组件自带的导航点指示器样式。
底部导航点（进度条）有三种样式：未完成状态的样式、已完成状态的样式和正在进行进度增长的样式。
- 进度条布局：开发者可以使用层叠布局 (Stack)，配合 Row 容器来实现进度条的布局。
- 图文播放时间与进度条匹配：要实现进度条缓慢增长至完成状态且用时与图片播放时间相匹配的效果，可以给 Row 容器组件添加属性动画 (animation)，设置 duration（动画持续时间）与图片播放时间匹配即可。
- 进度条状态切换：通过比较当前图片的 currentIndex 与进度条的 index，当 currentIndex 大于 index 时，应将进度条样式设置为已完成状态；反之，则设置为未完成状态。可以通过将进度条的背景颜色设置为 Color.White 或 Color.Grey 来实现这两种状态的切换。
开发步骤
- Swiper 组件初始化：
- 使用
Swiper组件创建一个轮播图容器，传入this.swiperController作为控制器。
- 使用
- 数据加载与展示：
- 使用
LazyForEach遍历this.data数组，其中每个元素是一个PhotoData对象。 - 对于每个
PhotoData对象，创建一个Image组件，图片资源通过$r函数加载，路径为app.media.加上 。
- 使用
