• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 创建轮播（Swiper）
2
3
4[Swiper](../reference/arkui-ts/ts-container-swiper.md)组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。
5
6
7## 布局与约束
8
9Swiper作为一个容器组件，如果设置了自身尺寸属性，则在轮播显示过程中均以该尺寸生效。如果自身尺寸属性未被设置，则分两种情况：如果设置了prevMargin或者nextMargin属性，则Swiper自身尺寸会跟随其父组件；如果未设置prevMargin或者nextMargin属性，则会自动根据子组件的大小设置自身的尺寸。
10
11
12## 循环播放
13
14通过loop属性控制是否循环播放，该属性默认值为true。
15
16当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
17
18- loop为true
19
20```ts
21...
22private swiperController: SwiperController = new SwiperController()
23...
24Swiper(this.swiperController) {
25  Text('0')
26    .width('90%')
27    .height('100%')
28    .backgroundColor(Color.Gray)
29    .textAlign(TextAlign.Center)
30    .fontSize(30)
31
32  Text('1')
33    .width('90%')
34    .height('100%')
35    .backgroundColor(Color.Green)
36    .textAlign(TextAlign.Center)
37    .fontSize(30)
38
39  Text('2')
40    .width('90%')
41    .height('100%')
42    .backgroundColor(Color.Blue)
43    .textAlign(TextAlign.Center)
44    .fontSize(30)
45}
46.loop(true)
47```
48
49![loop_true](figures/loop_true.gif)
50
51- loop为false
52
53```ts
54Swiper(this.swiperController) {
55  Text('0')
56    .width('90%')
57    .height('100%')
58    .backgroundColor(Color.Gray)
59    .textAlign(TextAlign.Center)
60    .fontSize(30)
61
62  Text('1')
63    .width('90%')
64    .height('100%')
65    .backgroundColor(Color.Green)
66    .textAlign(TextAlign.Center)
67    .fontSize(30)
68
69  Text('2')
70    .width('90%')
71    .height('100%')
72    .backgroundColor(Color.Pink)
73    .textAlign(TextAlign.Center)
74    .fontSize(30)
75}
76.loop(false)
77```
78
79![loop_false](figures/loop_false.gif)
80
81
82## 自动轮播
83
84Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。
85
86autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。
87
88```ts
89Swiper(this.swiperController) {
90  Text('0')
91    .width('90%')
92    .height('100%')
93    .backgroundColor(Color.Gray)
94    .textAlign(TextAlign.Center)
95    .fontSize(30)
96
97  Text('1')
98    .width('90%')
99    .height('100%')
100    .backgroundColor(Color.Green)
101    .textAlign(TextAlign.Center)
102    .fontSize(30)
103
104  Text('2')
105    .width('90%')
106    .height('100%')
107    .backgroundColor(Color.Pink)
108    .textAlign(TextAlign.Center)
109    .fontSize(30)
110}
111.loop(true)
112.autoPlay(true)
113.interval(1000)
114```
115
116![autoPlay](figures/autoPlay.gif)
117
118
119## 导航点样式
120
121Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。
122
123通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。
124
125- 导航点使用默认样式
126
127```ts
128Swiper(this.swiperController) {
129  Text('0')
130    .width('90%')
131    .height('100%')
132    .backgroundColor(Color.Gray)
133    .textAlign(TextAlign.Center)
134    .fontSize(30)
135
136  Text('1')
137    .width('90%')
138    .height('100%')
139    .backgroundColor(Color.Green)
140    .textAlign(TextAlign.Center)
141    .fontSize(30)
142
143  Text('2')
144    .width('90%')
145    .height('100%')
146    .backgroundColor(Color.Pink)
147    .textAlign(TextAlign.Center)
148    .fontSize(30)
149}
150```
151
152![indicator](figures/indicator.PNG)
153
154- 自定义导航点样式
155
156导航点直径设为30vp，左边距为0，导航点颜色设为红色。
157
158```ts
159let swco:Record<string, number | Color> = {'size':30,'left':0,'color':Color.Red}
160Swiper(this.swiperController) {
161  Text('0')
162    .width('90%')
163    .height('100%')
164    .backgroundColor(Color.Gray)
165    .textAlign(TextAlign.Center)
166    .fontSize(30)
167
168  Text('1')
169    .width('90%')
170    .height('100%')
171    .backgroundColor(Color.Green)
172    .textAlign(TextAlign.Center)
173    .fontSize(30)
174
175  Text('2')
176    .width('90%')
177    .height('100%')
178    .backgroundColor(Color.Pink)
179    .textAlign(TextAlign.Center)
180    .fontSize(30)
181}
182.indicator(
183  Indicator.dot()
184    .left(0)
185    .itemWidth(15)
186    .itemHeight(15)
187    .selectedItemWidth(30)
188    .selectedItemHeight(15)
189    .color(Color.Red)
190    .selectedColor(Color.Blue)
191)
192```
193
194![ind](figures/ind.PNG)
195
196
197## 页面切换方式
198
199Swiper支持手指滑动、点击导航点和通过控制器三种方式切换页面，以下示例展示通过控制器切换页面的方法。
200
201```ts
202@Entry
203@Component
204struct SwiperDemo {
205  private swiperController: SwiperController = new SwiperController();
206
207  build() {
208    Column({ space: 5 }) {
209      Swiper(this.swiperController) {
210        Text('0')
211          .width(250)
212          .height(250)
213          .backgroundColor(Color.Gray)
214          .textAlign(TextAlign.Center)
215          .fontSize(30)
216        Text('1')
217          .width(250)
218          .height(250)
219          .backgroundColor(Color.Green)
220          .textAlign(TextAlign.Center)
221          .fontSize(30)
222        Text('2')
223          .width(250)
224          .height(250)
225          .backgroundColor(Color.Pink)
226          .textAlign(TextAlign.Center)
227          .fontSize(30)
228      }
229      .indicator(true)
230
231      Row({ space: 12 }) {
232        Button('showNext')
233          .onClick(() => {
234            this.swiperController.showNext(); // 通过controller切换到后一页
235          })
236        Button('showPrevious')
237          .onClick(() => {
238            this.swiperController.showPrevious(); // 通过controller切换到前一页
239          })
240      }.margin(5)
241    }.width('100%')
242    .margin({ top: 5 })
243  }
244}
245```
246
247![controll](figures/controll.gif)
248
249
250## 轮播方向
251
252Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。
253
254当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。
255
256
257- 设置水平方向上轮播。
258
259```ts
260Swiper(this.swiperController) {
261  ...
262}
263.indicator(true)
264.vertical(false)
265```
266
267
268![截图2](figures/截图2.PNG)
269
270
271- 设置垂直方向轮播。
272
273```ts
274Swiper(this.swiperController) {
275  ...
276}
277.indicator(true)
278.vertical(true)
279```
280
281
282![截图3](figures/截图3.PNG)
283
284
285## 每页显示多个子页面
286
287Swiper支持在一个页面内同时显示多个子组件，通过[displayCount](../reference/arkui-ts/ts-container-swiper.md#属性)属性设置。
288
289```ts
290Swiper(this.swiperController) {
291  Text('0')
292    .width(250)
293    .height(250)
294    .backgroundColor(Color.Gray)
295    .textAlign(TextAlign.Center)
296    .fontSize(30)
297  Text('1')
298    .width(250)
299    .height(250)
300    .backgroundColor(Color.Green)
301    .textAlign(TextAlign.Center)
302    .fontSize(30)
303  Text('2')
304    .width(250)
305    .height(250)
306    .backgroundColor(Color.Pink)
307    .textAlign(TextAlign.Center)
308    .fontSize(30)
309  Text('3')
310    .width(250)
311    .height(250)
312    .backgroundColor(Color.Blue)
313    .textAlign(TextAlign.Center)
314    .fontSize(30)
315}
316.indicator(true)
317.displayCount(2)
318```
319
320![two](figures/two.PNG)
321
322## 相关实例
323
324针对Swiper组件开发，有以下相关实例可供参考：
325
326- [电子相册（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ElectronicAlbum)
327
328- [Swiper的使用（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SwiperArkTS)