• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# swiper开发指导
2
3
4swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[swiper](../reference/arkui-js/js-components-container-swiper.md)。
5
6
7## 创建swiper组件
8
9在pages/index目录下的hml文件中创建一个swiper组件。
10
11```html
12<!-- xxx.hml-->
13<div class="container">
14  <swiper>
15    <div class="item" style="background-color: #bf45ea;">
16      <text>item1</text>
17    </div>
18    <div class="item" style="background-color: #088684;">
19      <text>item2</text>
20    </div>
21    <div class="item" style="background-color: #7786ee;">
22      <text>item3</text>
23    </div>
24  </swiper>
25</div>
26```
27
28```css
29/* xxx.css */
30.container{
31  width: 100%;
32  height: 100%;
33  flex-direction: column;
34  background-color: #F1F3F5;
35  align-items: center;
36  justify-content: center;
37  width: 100%;
38}
39swiper{
40  height: 30%;
41}
42.item{
43  width: 100%;
44  height: 500px;
45}
46text{
47  width: 100%;
48  height: 100%;
49  text-align: center;
50  font-size: 50px;
51  color: white;
52}
53```
54
55
56![zh-cn_image_0000001181495038](figures/zh-cn_image_0000001181495038.gif)
57
58
59> **说明：**
60> swiper组件支持除&lt;list&gt;之外的子组件。
61
62
63## 添加属性
64
65swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。
66
67
68```html
69<!-- xxx.hml-->
70<div class="container">
71  <swiper index="1"  autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
72  scrolleffect="fade" loop="false">
73    <div class="item" style="background-color: #bf45ea;">
74      <text>item1</text>
75    </div>
76    <div class="item" style="background-color: #088684;">
77      <text>item2</text>
78    </div>
79    <div class="item" style="background-color: #7786ee;">
80      <text>item3</text>
81    </div>
82    <div class="item" style="background-color: #c88cee;">
83      <text>item4</text>
84    </div>
85  </swiper>
86</div>
87```
88
89
90```css
91/* xxx.css */
92.container{
93  width: 100%;
94  height: 100%;
95  flex-direction: column;
96  background-color: #F1F3F5;
97  align-items: center;
98  justify-content: center;
99}
100swiper{
101  height: 30%;
102}
103.item{
104  width: 100%;
105  height: 500px;
106}
107text{
108  width: 100%;
109  height: 100%;
110  text-align: center;
111  font-size: 50px;
112  color: white;
113}
114```
115
116![zh-cn_image_0000001181655292](figures/zh-cn_image_0000001181655292.gif)
117
118> **说明：**
119> - 设置indicator（是否启用导航点指示器）属性为true时digital（是否启用数字导航点）属性才会生效。
120>
121> - swiper子组件的个数大于等于2时设置的loop属性才会生效。
122>
123> - scrolleffect属性仅在loop属性值为false时生效。
124
125
126## 设置样式
127
128设置swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。
129
130
131```html
132<!-- xxx.hml-->
133<div class="container">
134    <swiper index="1" autoplay="true" interval="2000"  duration="500" >
135        <div class="item" style="background-color: bisque;">
136            <text>item1</text>
137        </div>
138        <div class="item" style="background-color: darkkhaki;">
139            <text>item2</text>
140        </div>
141        <div class="item" style="background-color: cadetblue;">
142            <text>item3</text>
143        </div>
144    </swiper>
145</div>
146```
147
148
149```css
150/* xxx.css */
151.container{
152  width: 100%;
153  height: 100%;
154  flex-direction: column;
155  background-color: #F1F3F5;
156  align-items: center;
157  justify-content: center;
158}
159swiper{
160  width:  500px;
161  height: 500px;
162  border-radius: 250px;
163  indicator-color: white;
164  indicator-selected-color: blue;
165  indicator-size: 40px;
166  indicator-top: 100px;
167  overflow: hidden ;
168}
169.item{
170  width: 100%;
171  height: 500px;
172}
173text{
174  width: 100%;
175  text-align: center;
176  margin-top: 150px;
177  font-size: 50px;
178  color: white;
179}
180```
181
182![zh-cn_image_0000001226896657](figures/zh-cn_image_0000001226896657.gif)
183
184
185## 绑定事件
186
187创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。
188
189
190```html
191<!-- xxx.hml-->
192<div class="container">
193  <swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
194    <div class="item" style="background-color: #bf45ea">
195      <text>item1</text>
196    </div>
197    <div class="item" style="background-color: #088684;">
198      <text>item2</text>
199    </div>
200    <div class="item" style="background-color: #7786ee;">
201      <text>item3</text>
202    </div>
203    <div class="item" style="background-color: #c88cee;">
204      <text>item4</text>
205    </div>
206  </swiper>
207  <div class="content">
208      <button class="pnbtn" onclick="previous">Previous</button>
209      <select onchange="selectChange">
210          <option value="0">swipeTo 1</option>
211          <option value="1">swipeTo 2</option>
212          <option value="2">swipeTo 3</option>
213          <option value="3">swipeTo 4</option>
214      </select>
215    <button class="pnbtn" onclick="next">Next</button>
216  </div>
217</div>
218```
219
220
221```css
222/* xxx.css */
223.container{
224  width: 100%;
225  height: 100%;
226  flex-direction: column;
227  background-color: #F1F3F5;
228  align-items: center;
229  justify-content: center;
230}
231swiper{
232  height: 30%;
233}
234.item{
235  width: 100%;
236  height: 500px;
237}
238text{
239  width: 100%;
240  height: 100%;
241  text-align: center;
242  font-size: 50px;
243  color: white;
244}
245select{
246  background-color: white;
247  width: 250px;
248  height: 80px;
249}
250.content{
251  margin-top: 100px;
252  justify-content: space-around;
253}
254.pnbtn{
255  width: 200px;
256  height: 80px;
257  font-size: 30px;
258}
259```
260
261
262```js
263// xxx.js
264import promptAction from '@ohos.promptAction';
265export default{
266  change(e){
267    promptAction.showToast({duration:2000,message:"current index:"+e.index});
268  },
269  finish(){
270    promptAction.showToast({duration:2000,message:"切换动作结束"});
271  },
272  selectChange(e){
273    this.$element('swiper').swipeTo({index: Number(e.newValue)});
274  },
275  previous(){
276    this.$element('swiper').showPrevious();
277  },
278  next(){
279    this.$element('swiper').showNext();
280  }
281}
282```
283
284![zh-cn_image_0000001227016767](figures/zh-cn_image_0000001227016767.gif)
285
286
287## 场景示例
288
289本场景中使用swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。
290
291
292```html
293<!-- xxx.hml-->
294<div class="container">
295  <swiper duration="500" indicator="false" id="swiper" onchange="change">
296    <div class="item" for="item in list">
297      <image src="{{item.src}}"></image>
298    </div>
299  </swiper>
300  <div class="content">
301    <div class="content_item {{index == $idx?'actived':''}}" for="item in list" onclick="imageTo({{$idx}})">
302      <image src="{{item.src}}"></image>
303    </div>
304  </div>
305</div>
306```
307
308
309```css
310/* xxx.css */
311.container{
312  flex-direction: column;
313  background-color: #F1F3F5;
314  align-items: center;
315  justify-content: center;
316  width: 100%;
317}
318swiper{
319  width: 100%;
320  height: 500px;
321}
322.item{
323  width: 100%;
324  height: 500px;
325}
326.content{
327  margin-top: -120px;
328  width: 70%;
329  display: flex;
330  justify-content: space-around;
331  height: 100px;
332}
333.content_item{
334  padding: 5px;
335  transform: scale(0.5);
336}
337.actived{
338  transform: scale(1);
339  border: 1px solid #b20937ea;
340}
341```
342
343
344```js
345// xxx.js
346import promptAction from '@ohos.promptAction';
347export default {
348  data:{
349    index: 0,
350    list:[
351      {src: 'common/images/1.png'},
352      {src: 'common/images/2.png'},
353      {src: 'common/images/3.png'},
354      {src: 'common/images/4.png'},]
355    },
356  imageTo(index){
357    this.index = index;
358    this.$element('swiper').swipeTo({index: index});
359  },
360  change(e){
361    this.index = e.index;
362  }
363}
364```
365
366![zh-cn_image_0000001263359599](figures/zh-cn_image_0000001263359599.gif)
367
368
369## 相关实例
370
371针对swiper开发，有以下相关实例可供参考：
372
373- [`Swiper`：内容滑动容器（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/Swiper)
374