Swiper(轮播图)的简单使用

代码实现时所用是的图片，存放位置为resources/base/media

`

@Entry
@Component
struct Index {
  //1.实例化控制器
  controller: SwiperController = new SwiperController()
  build() {
    Column() {

      //给swiper设置尺寸，子组件图片默认拉伸至和父组件一样的尺寸
      //2.绑定控制器
      Swiper(this.controller) {
        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('80%')
      .loop(true)
      .autoPlay(true)
      .interval(2000)
      .vertical(false)
      //设置导航点样式
      .indicator(
        Indicator.dot()
          .itemWidth(5)
          .itemHeight(5)
          .color(Color.Gray)
          .selectedItemWidth(8)
          .selectedItemHeight(8)
          .selectedColor(Color.White)
      )
      //3.使用控制器控制也翻页
      Row() {
        Button('上一页')
          .onClick(() => {
            this.controller.showPrevious()
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext()
          })
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

`