HarmonyOS 鸿蒙Next 有没有短视频列表框架,类似抖音短视频

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 有没有短视频列表框架,类似抖音短视频

有没有短视频列表框架,类似抖音短视频

2 回复
@Entry
@Component
struct FangDouYin {
  private videoValue: Array<string> = ['/resources/video/video1.mp4', '/resources/video/video2.mp4', '/resources/video/video3.mp4',
    '/resources/video/video4.mp4', '/resources/video/video5.mp4', '/resources/video/video6.mp4']
  build() {
    Column() {
      Swiper() {
        ForEach(this.videoValue, item => {
          PlayVideo({ item: item })
        }, item => item)
      }
      .index(1)
      .vertical(true)
      .indicator(false)
      .loop(true)
      .align(Alignment.Center)
    }.height('100%')
    .backgroundColor(Color.Black)
  }
}
@Component
struct PlayVideo {
  item: string;
  private videoController: VideoController = new VideoController()
  build() {
    Video({ src: this.item, currentProgressRate: 1, controller: this.videoController })
      .controls(false)
      .objectFit(ImageFit.Contain)
      .loop(true)
      .autoPlay(true)
  }
}

更多使用请参考demo:https://gitee.com/harmonyos/codelabs/tree/master/SwiperArkTS

HarmonyOS 鸿蒙Next具备实现类似抖音短视频列表框架的能力

在HarmonyOS鸿蒙Next中,开发者可以通过组合使用ArkUI框架中的多种组件来实现短视频列表功能。例如,可以使用List组件来展示视频列表,每个ListItem中包含一个Video组件用于视频播放。同时,利用Stack、Column等布局组件,可以实现类似抖音的UI布局,包括视频主体、底部描述、右侧功能区等。

此外,为了实现短视频列表的滚动播放和联动效果,可以使用Scroll组件与List组件的嵌套,并通过List组件的滚动控制器和nestedScroll属性来控制滚动行为。这样,当用户滑动列表时,可以实现视频卡片和列表区域的联动滚动,提升用户体验。

如果开发者在实现过程中遇到具体问题,可以参考HarmonyOS的官方文档和开发者社区的资源,或者通过实践不断摸索和优化。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部