基于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)

2. 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)