HarmonyOS鸿蒙Next“仿抖音快手”App开发技术分享（四）利用滑块实现轮播特效

HarmonyOS鸿蒙Next“仿抖音快手”App开发技术分享（四）利用滑块实现轮播特效

上一节我们利用相对布局实现了短视频播放界面的交互图标叠加效果，那么除了在空间上的叠加特效之外，还有另一种在时间上的轮播特效，允许同一类型的媒体列表随着时间流逝而切换。这种轮播特效便用到了滑块组件Swiper，它支持输入一组图片或者一组视频，通过滑动手势来切换前后的媒体内容。

Swiper是一种滑块视图容器，提供子组件滑动轮播显示的能力。Swiper的构造方法可传入SwiperController类型的滑块控制器，SwiperController提供的控制方法说明如下：

• showNext：翻到下一页。
• showPrevious：翻到上一页。
• changeIndex：翻到指定位置的页面。

除了支持通用属性以外，Swiper还支持以下的常用属性：

• vertical：是否为垂直方向。
• index：当前显示的子组件索引值。默认为0也就是显示第一个子组件。
• autoPlay：是否自动轮播。默认为false表示不会自动轮播。
• loop：是否循环轮播。默认为true表示循环轮播。
• interval：前后两次轮播的间隔。单位毫秒，默认为3000毫秒。
• duration：每次轮播的动画持续时长。单位毫秒，默认为400毫秒。
• cachedCount：预加载子组件个数, 以当前页面为基准，加载当前显示页面的前后个数。默认为1表示当前页的前一页和后一页都会预先加载。
• indicator：是否显示圆点指示器。默认为true表示显示。

结合上述的构造方法与属性说明，可编写Swiper组件的框架代码如下所示：

Swiper(this.swiperController) {
  // 这里暂时省略内部组件的代码
}

.vertical(false) // 是否垂直方向。默认为false表示水平方向，为true表示垂直方向
.index(0) // 默认显示第几个组件
.cachedCount(1) // 预加载子组件个数, 以当前页面为基准，加载当前显示页面的前后个数。为1表示当前页的前1页和后1页都预先加载
.autoPlay(true) // 是否自动轮播
.loop(true) // 是否循环轮播
.interval(4000) // 轮播间隔，单位毫秒
.duration(1000) // 轮播时长，单位毫秒
.indicator(true) // 是否显示指示器

Swiper又是一种容器，里面放着同类型的子组件，那么首先得提供一个媒体内容数组，用于依次填充子组件列表。比如下面代码初始化了一个图片数组：

private bannerArray: Array<Resource> = [
  $r("app.media.banner_1"),
  $r("app.media.banner_2"), 
  $r("app.media.banner_3"),
  $r("app.media.banner_4"), 
  $r("app.media.banner_5")
]

接着利用ForEach循环语句，根据上面的图片数组依次生成轮播需要的图像组件，详细的循环遍历代码如下：

ForEach(this.bannerArray, (item: Resource) => {
  Image(item)
    .width('100%')
    .height(150)
    .objectFit(ImageFit.Cover)
})

综合以上的滑块组件代码，实现的图片轮播界面如下：

下一篇文章会介绍如何申请网络权限，以便鸿蒙APP能够访问网络视频。