基本用法

作用

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

Swiper(){

}     //子组件为轮播内容
.width()
.height()
     //设置Swiper尺寸，子组件会自适应其大小

常用属性

Swiper(){}
.宽、高等通用属性
.loop(true/false)     //是否开启循环（默认true）
.autoPlay(true/false)     //是否自动轮播（默认false）
.interval(number)     //设置自动播放时的时间间隔（单位毫秒）
.vertical(true/false)     //是否纵向滑动（默认false）

设置导航点

对导航点样式进行设置

基本样式

Swiper(){}
.indicattor(true/false)     //是否显示导航点
.indicator(Indicator.dot())      //圆点指示器（默认）
.indicator(Indicator.digit())      //数字指示器

圆点指示器

Swiper(){}
.top/bottom/left/right()     //设置指示器与上/下/左/右的距离
.itemWidth/Height()      //设置指示器宽/高
.selectdItemWidth/Height()     //设置当前选中指示器宽/高
.color()     //设置指示器颜色
.selectedColor()     //设置当前选中指示器颜色

通过控制器控制页面切换

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

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