轮播图组件的相关使用

轮播图组件Swiper基本介绍

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

第一章

它的基本用法： 1.轮播的内容：内容作为Swiper的子组件就可以，注意它的子组件只能有一个，可以用column和row进行包裹，然后在里面在进行其他组件的描写。 2.设置Swiper的尺寸，里面的内容会被自动撑开 3.设置内容的尺寸，这样的话就会将Swiper进行撑开

基本语法：

Swiper(){
//只能有一个子组件，可以更column类似的子组件进行包裹
//轮播的内容
//设置其尺寸，如果内容尺寸大于swiper,则swiper会自动被撑开
} 
//设置swiper的尺寸，如果内容的尺寸小于swiper尺寸，则内容将会被拉伸，它的尺寸优先级要高
.width('100%')
.height(100)

1.1常用属性

以上是常见的一些属性。

1.2调整导航点

关于导航点的调整可分为2类 1.可以将它进行隐藏 2.有圆点导航点和数字的导航点，但是在日常的开发中圆点的更常用。

1.2.1设置导航点的位置

可以设置导航点的位置，有：left,top,right,botton，这些的参数类型都是Length，单位是vp

1.2.2导航点的常见样式

可以设置导航点选中时的样式以及未选中时的样式， 选中时的样式有：selectedItemWidth,selectedColor,selectedItemHeight; 以及可以设置未选择时的样式，有： itemWidth，itemHeight，color

这里要特别注意导航点设置的语法！！！

举例：

@Entry
@Component
struct Index {
  build() {
    Column() {
      //   1.0 轮播图的使用
      Swiper() {
        // 可以放任何组件，但是如果放了多个组件，那么这多个组件就会被Swiper进行轮播
        // 总结：轮播组件里面的元素如果没有宽高，会自适应轮播图组件本身的宽高
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)

        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)

        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .width('100%')
      .height(300)
      // =====第一组属性===============
      .autoPlay(true) // true：自动轮播 false：手动轮播（默认值）
      .interval(1000) //默认是3000毫秒 = 3秒
      .loop(true) //loop=true是让Swiper内部组件一遍遍的轮播,false:只轮播一次就停止
      //===第2组属性====================
      // .vertical(true)  //将轮播图组件改为纵向滚动
      // ===第3组属性===================
      // .indicator(false)  // true/false可以实现导航点的显示和隐藏
      
      
      
      
      // 2. ✨✨原点指示器样式设置
      .indicator( //设置选中点的颜色
        DotIndicator.dot()//设置原点指示器的样式
          .selectedItemWidth(50)// 设置选中点的宽度
          .color(Color.White)// 设置未选中点的颜色
          .selectedColor(Color.Orange)
          // .left(100)  // 指示器离左边的距离
          // .top(100)  // 指示器离上边的距离
      )



      // ====第4组属性===========【了解】====
      // .indicator(DotIndicator.digit()
      //   .selectedFontColor(Color.White)
      //   .fontColor(Color.White)
      //   .left(0)
      //   .top(0)
      // )

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

  }
}

1.3页面的切换方式

步骤： 1.实例化控制器 2.绑定给Swiper 3.调用控制器的方法

showNext(): void为快速翻至下一页

showPrevious(): void为快速翻至上一页

举例：

@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)
  }
}

1.4举例

案例——小米有品

参考代码

@Entry
@Component
struct Index {
  build() {
    Swiper() {
      Image($r('app.media.ic_swiper_xmyp01'))
      Image($r('app.media.ic_swiper_xmyp02'))
      Image($r('app.media.ic_swiper_xmyp03'))
      Image($r('app.media.ic_swiper_xmyp04'))
    }
    .width('100%')
    .height(160)
    .loop(true)
    .autoPlay(true)
    .interval(4000)
    .indicator(
      DotIndicator.dot()  // 原点指示器类型
        .selectedColor(Color.White) // 选中指示器颜色
        .selectedItemWidth(30) // 选中指示器宽度
        .selectedItemHeight(4)  // 选中指示器高度
        .itemWidth(10) // 未选中指示器宽度
        .itemHeight(4)  // 未选中指示器高度
        .color(Color.Red)  // 未选中指示器颜色
    )
  }
}