# 6.4:Swiper

Swiper 是页面切换类容器组件,它提供了切换页面显示的能力, Swiper 包含的每一个子组件就表示一个页面,例如 Swiper 有 4 个子组件,那么 Swiper 就有 4 个页面。 Swiper 可以绑定一个 SwiperController 控制显示上一页或者下一页。

# 6.4.1:Swiper定义介绍

interface SwiperInterface {
  (controller?: SwiperController): SwiperAttribute;
}
1
2
3
  • controller:给 Swiper 绑定一个控制器,控制页面翻页。

简单样例如下:

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

样例运行结果如下图所示:

6_4_1

# 6.4.2:Swiper属性介绍

declare class SwiperAttribute<T> extends CommonMethod<T> {
  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;
}
1
2
3
4
5
6
7
8
9
10
11
12
  • index:默认显示显示第几页,默认值为 0。

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

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

  • indicator:是否显示导航点指示器,默认显示。

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

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

  • vertical:是否竖直翻页,默认是 false。

简单样例如下所示:

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)                  // 设置关闭循环翻页,当显示最后一页后首页时无法继续往下翻页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

样例运行结果如下图所示:

6_4_2

# 6.4.3:Swiper事件介绍

declare class SwiperAttribute<T> extends CommonMethod<T> {
  onChange(event: (index: number) => void): T;
}
1
2
3
  • onChange:页面切换时回到当前方法,显示当前第几页。

# 6.4.4:SwiperController简介

SwiperControllerSwiper 的页面切换控制器,可以将此对象绑定至 Swiper 组件上,然后通过它控制翻页, SwiperController 定义如下:

export declare class SwiperController {
  showNext();
  showPrevious();
}
1
2
3
4
  • showNext:显示下一页。
  • showPrevious:显示上一页。

简单样例如下所示:

@Entry @Component struct ComponentTest {

  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 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

样例运行结果如下图所示:

6_4_3
(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2