#鸿蒙通关秘籍# 如何在HarmonyOS开发中使用Swiper组件实现自动轮播图？

  
Swiper( ){
   
//轮播内容
    
Image（...）
    
}
    
//给Swiper设置尺寸（否则只能根据内容自动拉伸）
    
.width('100%')
  
.height(100)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

Swiper(){
    
  Text('1')
    
    .backgroundColor(Color.Black)
    
  Text('1')
    
    .backgroundColor(Color.Blue)
    
  Text('1')
    
    .backgroundColor(Color.Green)
    
}
    
.width('100%')
    
.height(100)
    
    
.loop(true)//开启循环，默认为true
    
    
.autoPlay(true)//开启自动轮播
    
    
.interval(5000)//5秒
    
    
.vertical(true)//纵向
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

//定制小圆点
    
// .indicator(false)//小圆点关掉
    
.indicator(
    
   Indicator.dot()
    
     .itemWidth(20)//小圆点宽度
    
     .itemHeight(20)//小圆点高度
    
     .color(Color.Blue)//默认颜色
    
     .selectedItemWidth(25)
    
     .selectedItemHeight(25)
    
     .selectedColor(Color.Black)
    
)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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%')
    
    
.aspectRatio(2.5)//等比例伸缩
    
.loop(true)//开启循环，默认为true
    
.autoPlay(true)//开启自动轮播
    
.interval(4000)//5秒
    
.vertical(false)//true纵向,false横向
    
//定制小圆点
    
// .indicator(false)//小圆点关掉
    
.indicator(
    
   Indicator.dot()
    
     .itemWidth(10)//小圆点宽度
    
     .selectedItemWidth(30)
    
     .selectedItemHeight(10)
    
     .selectedColor(Color.White)
    
)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.