ArkUI滚动类组件-Swiper

2024-10-07 14:25:03 浏览数 (6)

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

Swiper定义介绍

代码语言：ts复制
interface SwiperInterface {
  (controller?: SwiperController): SwiperAttribute;
}
  • controller：给 Swiper 绑定一个控制器，控制页面翻页。

简单样例如下：

代码语言：ts复制
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)

Swiper属性介绍

代码语言：ts复制
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;
}
  • index：默认显示显示第几页，默认值为 0。
  • autoPlay：是否自动播放，默认值为 false ，当设置为自动播放时，导航点无法点击。
  • interval：设置自动播放时，播放的时间间隔，单位毫秒，默认是 3000。
  • indicator：是否显示导航点指示器，默认显示。
  • loop：是否开启循环显示，也就是说当翻页到最后一页再往下翻页是否会回到第一页，默认开启。
  • duration：页面切换的动画时长，单位为毫秒，默认是 400。
  • vertical：是否竖直翻页，默认是 false。

简单样例如下所示：

代码语言：ts复制
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事件介绍

代码语言：ts复制
declare class SwiperAttribute<T> extends CommonMethod<T> {
  onChange(event: (index: number) => void): T;
}
  • onChange：页面切换时回到当前方法，显示当前第几页。

SwiperController简介

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

代码语言：ts复制
export declare class SwiperController {
  showNext();
  showPrevious();
}
  • showNext：显示下一页。
  • showPrevious：显示上一页。

简单样例如下所示：

代码语言：ts复制
@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 })
  }
}

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：