Swiper 的知识总结

一 、Swiper的基本用法

1.使用场景：

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示，比如：

1.2 基本用法

首先来看看如何设置轮播内容，以及设置尺寸

1. 轮播内容：内容作为Swiper的子组件即可
2. 尺寸：

1. 1. 设置 Swiper 的尺寸：内容会拉伸为和 Swiper 一致（优先级高）
   2. 设置内容尺寸：会将Swiper撑开

Swiper() {
  // 轮播内容 
  // (设置尺寸，撑开swiper)
}
// 设置尺寸（内容拉伸、优先级高）
.width('100%')
.height(100)

1.3 基本属性

设置了内容以及尺寸之后已经可以实现基础的轮播效果啦，接下来看看一些常见属性

1.4 调整导航点的样式

使用indicator这个属性去设置导航点样式

Swiper(){
  // 略
}
  .indicator(
    Indicator.dot()
      // .xxx(设置圆点指示器的属性)
  ) // 圆点指示器（默认）

1.4.1常见的样式

二、 拓展-页面切换方式

到目前为止 咱们已经可以通过Swiper实现常见的应用效果啦，最后补充一点：如何通过控制器控制页面切换

核心步骤 3：

1. 实例化控制器
2. 设置给 Swiper
3. 调用控制器方法

SwiperController对象核心方法

showNext(): void	翻至下一页。翻页带动效切换过程，翻页时长可以通过Swiper组件duration和curve指定。
showPrevious(): void	翻至上一页。翻页带动效切换过程，翻页时长可以通过Swiper组件duration和curve指定。
更多方法参考文档。。。。。

代码实现

@Entry
@Component
struct SwiperDemo {
  // 1.创建控制器对象
  controller: SwiperController = new SwiperController()

  build() {
    Column({ space: 10 }) {
      // 2. 设置给 Swiper
      Swiper(this.controller) {
        // 略
      }
      Row() {
        Button('上一页')
          .onClick(() => {
            // 3.调用控制器的方式实现切换效果
            this.controller.showPrevious()
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext()
          })
      }

    }
    .width('100%')
    .height('100%')

    // .padding(20)
  }
}