HarmonyOS Next中有图文作品轮播开发？

Question

如题：HarmonyOS Next中有图文作品轮播开发？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

由多张图片组成一个合集，图片可以自动进行轮播，也可以手动去进行图片切换。自动轮播时，图片下方的进度条缓慢加载至完成状态；手动切换时，图片下方的进度条瞬间切换至已完成状态或未完成状态
可以上面图片的轮播部分继续使用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)
//底部导航按钮实现
@Builder
progressComponent() {
  Row({ space: 5 }) {
    ForEach(this.progressData, (item: PhotoData, index: number) => {
      Stack({ alignContent: Alignment.Start }) {
        Row()
          .zIndex(1)
          .width(this.currentIndex >= index && !this.slide ? '100%' : '0')
          .height(2)
          .borderRadius(2)
          .backgroundColor(Color.White)
          .animation(!this.slide ? {
            duration: this.duration - 400,
            curve: Curve.Linear,
            iterations: 1,
            playMode: PlayMode.Normal,
            onFinish: () => {
              if (this.currentIndex === this.progressData.length - 1) {
                this.duration = 400;
                this.currentIndex = -1;
              }
            }
          } : { duration: 0, iterations: 1 })
      }
      .width('100%')
      .height(2)
      .borderRadius(2)
      .backgroundColor(this.currentIndex >= index && this.slide ? Color.White : Color.Grey)
      .layoutWeight(1)
    }, (item: PhotoData) => JSON.stringify(item))
  }
  .width('100%')
  .height(50)
}

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