HarmonyOS NEXT如何设置自动播放一组图片？

Question

HarmonyOS NEXT如何设置自动播放一组图片

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

使用Swiper组件来实现。将图片合集的数据传入Swiper组件后，需要对Swiper组件设置一些属性，来完成图片自动轮播效果。

• 通过设置loop属性控制是否循环播放，该属性默认值为true。当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
• 通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。autoPlay为true时，会自动切换播放子组件。
• 通过设置interval属性，控制子组件与子组件之间的播放间隔。interval属性默认值为3000，单位毫秒。
• 通过设置indicator属性为false，来关闭Swiper组件自带的导航点指示器样式

Swiper(this.swiperController) {
  LazyForEach(this.data, (item: PhotoData, index: number) => {
    Image($r(`app.media.` + item.id))
      .width(this.foldStatus === 2 ? '100%' : '70%')
      .height('100%')
  }, (item: PhotoData) => JSON.stringify(item))
}
.loop(!this.slide ? true : false)
.autoPlay(!this.slide ? true : false)
.interval(3000)
.indicator(false)

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。