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

鸿蒙场景化示例代码技术工程师
发布于 2025-4-15 10:24
3184浏览
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.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  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)
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

分类
收藏
回复
举报


回复
    相关推荐