# 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 绑定一个控制器，控制页面翻页。

简单样例如下：

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

# 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。

简单样例如下所示：

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

# 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简介

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

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

1
2
3
4

showNext：显示下一页。
showPrevious：显示上一页。

简单样例如下所示：

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

← 6.3：Grid、GridItem 6.5：下拉刷新（Refresh） →

请作者喝杯咖啡

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心