滑块视图容器Swiper，提供子组件滑动轮播显示的能力。本节演示了API 15新增的动效模式SwiperAnimationMode的应用展示。

 

 

Swiper组件翻页至指定页面的动效模式。描述如下：

 

1. 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
2. 元服务API： 从API version 15开始，该接口支持在元服务中使用。
3. 系统能力： SystemCapability.ArkUI.ArkUI.Full

 

 

安装新版的DevEco Studio 5.0.5 Release

 

新版的DevEco Studio包含了最新的API 17,可以更好的体验鸿蒙的开发乐趣。

 

 

 

 

 

 

 

安装设备模拟器

 

为了能够运行鸿蒙应用，还需要安装设备模拟器。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

修改镜像的位置

 

 

 

 

 

 

 

 

 

创建一个SwiperAnimationMode示例

 

创建一个名为“ArkTSSwiperAnimationMode”的项目，用于演示SwiperAnimationMode的使用示例。

 

 

 

创建数据源类MyDataSource

该类主要是用于提供Swiper组件的数据源。代码如下

 

 

class MyDataSource implements IDataSource {
  private list: number[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

 

 

 

 

创建Swiper组件

 

Swiper组件代码如下：

 

@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();
  private data: MyDataSource = new MyDataSource([]);

  aboutToAppear(): void {
    let list: number[] = [];
    for (let i = 0; i <= 20; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list);
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width('90%')
            .height(360)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(false)
      .interval(4000)
      .loop(false)
      .duration(1000)
      .itemSpace(5)
      .prevMargin(35)
      .nextMargin(35)
      .onChange((index: number) => {
        console.info(index.toString());
      })
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index);
        console.info("targetIndex: " + targetIndex);
        console.info("current offset: " + extraInfo.currentOffset);
        console.info("target offset: " + extraInfo.targetOffset);
        console.info("velocity: " + extraInfo.velocity);
      })
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index);
        console.info("current offset: " + extraInfo.currentOffset);
      })

      Column({ space: 5 }) {
        Button('NO_ANIMATION 0')
          .onClick(() => {
            this.swiperController.changeIndex(0, SwiperAnimationMode.NO_ANIMATION);
          })
        Button('DEFAULT_ANIMATION 10')
          .onClick(() => {
            this.swiperController.changeIndex(10, SwiperAnimationMode.DEFAULT_ANIMATION);
          })
        Button('FAST_ANIMATION 20')
          .onClick(() => {
            this.swiperController.changeIndex(20, SwiperAnimationMode.FAST_ANIMATION);
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

 

 

 

这里重点介绍API 15新增的事件changeIndex(index: number, animationMode?: SwiperAnimationMode | boolean)，其中SwiperAnimationMode就是设置翻页至指定页面时的动效模式。默认值：SwiperAnimationMode.NO_ANIMATION。其中，动效模式有以下三种选择：

1. NO_ANIMATION 无动效翻页至指定页面。
2. DEFAULT_ANIMATION 有动效翻页至指定页面。
3. FAST_ANIMATION 先无动效翻页至指定页面附近，再有动效翻页至指定页面。

 

 

上述示例，通过三个按钮的点击，来触发不同的动效模式的效果。

 

NO_ANIMATION 无动效翻页至指定页面，效果如下。

 

 

 

DEFAULT_ANIMATION 有动效翻页至指定页面，效果如下。

 

 

FAST_ANIMATION 先无动效翻页至指定页面附近，再有动效翻页至指定页面，效果如下。

 

源码

 

本示例源码归档至《跟老卫学HarmonyOS开发》：https://github.com/waylau/harmonyos-tutorial