基于XComponent滑动功能鸿蒙示例代码

鸿蒙场景化示例代码技术工程师
发布于 2025-4-15 10:24
浏览
0收藏

本文原创发布在华为开发者社区

介绍

本示例基于XComponent组件实现了上下滑动视频浏览效果,同时提供了另一种XComponent组件实现的上下滑动视频浏览效果,用于与XComponent组件案例对比。

基于XComponent滑动功能源码链接

效果预览

基于XComponent滑动功能鸿蒙示例代码-鸿蒙开发者社区

使用说明

运行项目前,请执行 ohpm install @ohos/hamock,下载hamock依赖。

实现思路

  1. 无XComponent组件实现如下:

Swiper() {
  ForEach(this.videoValue, (item: string) => {
    PlayVideo({ item: item })
  }, (item: string) => item)
}
.index(1)
  .vertical(true)
  .indicator(false)
  .loop(true)
  .align(Alignment.Center)


  1. XComponent组件实现如下:

XComponent({ id: 'xcomponentId-container', type: 'component' }) {
  addText(this.message)
  Divider()
    .margin(4)
    .strokeWidth(2)
    .color('#F1F3F5')
    .width('80%')
  Column() {
    Swiper() {
      ForEach(this.videoValue, (item: string) => {
        PlayVideo({ item: item })
      }, (item: string) => item)
    }
    .index(1)
      .vertical(true)
      .indicator(false)
      .loop(true)
      .align(Alignment.Center)

  }.height('100%')
    .backgroundColor(Color.Black)
}

分类
收藏
回复
举报
回复
    相关推荐