轮播 Swiper

概述

Swiper 组件提供滑动轮播显示的能力。 Swiper 本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。 通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力

参数

 (controller?: SwiperController): SwiperAttribute;

属性

declare class SwiperAttribute extends CommonMethod<SwiperAttribute> {
  index(value: number): T;
  autoPlay(value: boolean): T;
  interval(value: number): T;
  indicator(value: boolean): T;
  loop(value: boolean): T;
  duration(value: number): T;
  vertical(value: boolean): T;
  itemSpace(value: number | string): T;
  displayMode(value: SwiperDisplayMode): T;
  onChange(event: (index: number) => void): T;
}

• index：默认显示显示第几页，默认值为 0。

• autoPlay：是否自动播放，默认值为 false ，当设置为自动播放时，导航点无法点击。

• interval：设置自动播放时，播放的时间间隔，单位毫秒，默认是 3000。

• indicator：是否显示导航点指示器，默认显示。

• loop：是否开启循环显示，也就是说当翻页到最后一页再往下翻页是否会回到第一页，默认开启。

• duration：页面切换的动画时长，单位为毫秒，默认是 400。

• vertical：是否竖直翻页，默认是 false。

案例如下

@Entry
@Component
struct Index {
    build() {
        Swiper() {
            Text('Page1')
                .fontSize(20)
                .backgroundColor('#aabbcc')
            Text('Page2')
                .fontSize(20)
                .backgroundColor('#aabbcc')
            Text('Page3')
                .fontSize(20)
                .backgroundColor('#aabbcc')
        }
        .width('90%')
        .height(120)
        .backgroundColor(Color.Pink)
        .index(1)                     // 设置默认显示第二页
        .indicator(true)              // 设置显示导航指示器
        .vertical(true)               // 设置竖直翻页
        .loop(false)                  // 设置关闭循环翻页，当显示最后一页后首页时无法继续往下翻页
    }
}

Swiper 事件介绍

declare class SwiperAttribute<T> extends CommonMethod<T> {
  onChange(event: (index: number) => void): T;
}

• onChange：页面切换时回到当前方法，显示当前第几页。

SwiperController 简介

SwiperController 是 Swiper 的页面切换控制器，可以将此对象绑定至 Swiper 组件上，然后通过它控制翻页

SwiperController 定义如下：

export declare class SwiperController {
  showNext();
  showPrevious();
}

• showNext：显示下一页。

• showPrevious：显示上一页。

@Entry
@Component
struct Index {
    private controller: SwiperController = new SwiperController();
    build() {
        Column() {
            Swiper(this.controller) {      // 绑定翻页控制器
                Text('Page1')
                    .fontSize(20)
                    .backgroundColor('#aabbcc')
                Text('Page2')
                    .fontSize(20)
                    .backgroundColor('#aabbcc')
                Text('Page3')
                    .fontSize(20)
                    .backgroundColor('#aabbcc')
            }
            .width('90%')
            .height(120)
            .backgroundColor(Color.Pink)
            .index(1)                      // 默认显示第二页
            .indicator(true)               // 显示导航指示器

            Row({space: 20}) {
                Button('上一页')
                    .onClick(() => {
                        this.controller.showPrevious();
                    })
                Button('下一页')
                    .onClick(() => {
                        this.controller.showNext();
                    })
            }
            .margin({top: 10})
        }
        .alignItems(HorizontalAlign.Center)
        .width('100%')
        .height('100%')
        .padding({ left: 20, right: 20, top: 10 })
    }
}