【中工开发者】基于Swiper组件实现短视频上下滑动切换

最新推荐文章于 2025-10-16 17:38:57 发布

原创

最新推荐文章于 2025-10-16 17:38:57 发布 · 1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #harmonyos

短视频切换

简介

本示例基于Swiper组件实现了短视频的滑动上下切换。

效果预览

使用说明：

1.启动应用后显示短视频界面。

2.上下滑动切换短视频。

工程目录

├──entry/src/main/ets │ ├──common │ │ └──CommonConstants.ets // 常量类 │ ├──entryability │ │ └──EntryAbility.ets // 程序入口 │ ├──model │ │ ├──BasicDataSource.ets // 懒加载DataSource │ │ └──DataModel.ets // 数据类 │ ├──pages │ │ └──Index.ets // 首页 │ └──view │ ├──Side.ets // 视频信息 │ └──VideoSwiper.ets // 视频滑动组件 └──entry/src/main/resources // 应用资源目录

约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。

3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。

4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。

具体实现介绍

常量类

export class CommonConstants {
  /**
   * Full size.
   */
  static readonly FULL_SIZE: string = '100%';

  /**
   * List item width.
   */
  static readonly LIST_ITEM_WIDTH: string = '30%';

  /**
   * List width.
   */
  static readonly LIST_WIDTH: string = '60%';

  /**
   * Column width.
   */
  static readonly COLUMN_WIDTH: string = '60%';

  /**
   * Video information width.
   */
  static readonly VIDEO_INFO_WIDTH: string = '80%';

  /**
   * Text width.
   */
  static readonly TEXT_WIDTH: string = '70%';

  /**
   * Column height.
   */
  static readonly COLUMN_HEIGHT: string = '70%';

  /**
   * Row width.
   */
  static readonly ROW_WIDTH: string = '66%';

  /**
   * Duration
   */
  static readonly DURATION: number = 200;
}

FULL_SIZE: 表示全尺寸，其值为字符串 '100%'。用于设置元素的宽度或高度为容器的100%。
LIST_ITEM_WIDTH: 表示列表项的宽度，其值为字符串 '30%'。用于设置列表中每个项的宽度。
LIST_WIDTH: 表示列表的宽度，其值为字符串 '60%'。用于设置整个列表组件的宽度。
COLUMN_WIDTH: 表示列的宽度，其值为字符串 '60%'。用于设置表格或布局中的列宽。
VIDEO_INFO_WIDTH: 表示视频信息的宽度，其值为字符串 '80%'。用于设置视频信息组件的宽度。
TEXT_WIDTH: 表示文本的宽度，其值为字符串 '70%'。用于设置文本内容的宽度。
COLUMN_HEIGHT: 表示列的高度，其值为字符串 '70%'。用于设置表格或布局中的列高。
ROW_WIDTH: 表示行的宽度，其值为字符串 '66%'。用于设置表格或布局中的行宽。
DURATION: 表示持续时间，其值为数字 200。这个值是以毫秒为单位的时间长度，用于动画、过渡或其他需要持续时间的场景。

这些常量被声明为 static readonly，它们是静态的，不能被修改，并且只能在类外部通过类名来访问，例如 CommonConstants.FULL_SIZE。通过这样设计来确保这些值在应用程序的整个生命周期中保持不变，并且可以在不同的组件或模块之间共享。

程序入口

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

使用TypeScript编写的类 EntryAbility，它继承自 UIAbility 类。

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void:
- 这个方法在 EntryAbility 实例被创建时调用。
- 它接收两个参数：want 和 launchParam，这些参数可能包含了启动这个ability（能力）时传递的信息和参数。
- 方法内部使用 hilog.info 记录了一条信息日志，表明 onCreate 方法被调用。
onDestroy(): void:
- 这个方法在 EntryAbility 实例被销毁时调用。
- 它记录了一条信息日志，表明 onDestroy 方法被调用。
onWindowStageCreate(windowStage: window.WindowStage): void:
- 这个方法在主窗口阶段（windowStage）被创建时调用。
- 它记录了一条信息日志，表明 onWindowStageCreate 方法被调用。
- 方法内部调用 windowStage.loadContent 方法来加载页面内容，这里加载的是 'pages/Index'。如果加载失败，它会记录一条错误日志。
onWindowStageDestroy(): void:
- 这个方法在主窗口阶段被销毁时调用。
- 它记录了一条信息日志，表明 onWindowStageDestroy 方法被调用。
- 这里可以释放与UI相关的资源。
onForeground(): void:
- 这个方法在 EntryAbility 被带到前台时调用。
- 它记录了一条信息日志，表明 onForeground 方法被调用。
onBackground(): void:
- 这个方法在 EntryAbility 回到后台时调用。
- 它记录了一条信息日志，表明 onBackground 方法被调用。

这个类处理了UI生命周期的不同阶段，包括创建、销毁、前台和后台切换，以及窗口阶段的创建和销毁。每个方法都使用 hilog 来记录日志。windowStage.loadContent 方法用于加载UI页面，这是UI框架中常见的模式，用于动态加载和显示页面内容。

懒加载

import { hilog } from '@kit.PerformanceAnalysisKit';

/**
 * Basic implementation of data listening with IDataSource.
 */
export abstract class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];

  // Get the length of the array.
  public abstract totalCount(): number;

  // Retrieve data at the specified index.
  public getData(index: number): void {
    hilog.info(0x0000, 'testTag', 'getData, index:' + index);
  }

  // Add a listener to the data source for the LazyForEach component.
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  // Remove the listener from the data source for the corresponding LazyForEach component.
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  // Notify the LazyForEach component to reload all its child components.
  notifyDataReload(): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataReloaded();
    });
  }

  // Notify the LazyForEach component to add a child component at the index corresponding to the specified index.
  notifyDataAdd(index: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataAdd(index);
    })
  }

  // Notify the LazyForEach component that there is a change in the data at the index corresponding to the specified
  // index, and that the child component at this index needs to be rebuilt.
  notifyDataChange(index: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataChange(index);
    })
  }

  // Notify the LazyForEach component to remove the child component at the index corresponding to the specified index.
  notifyDataDelete(index: number): void {
    this