• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# swiper
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @Hu_ZeQi-->
5<!--Designer: @jiangdayuan-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9
10滑动容器，提供切换子组件显示的能力。
11
12
13> **说明：**
14>
15> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
16
17
18
19## 属性
20
21除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
22
23| 名称        | 类型      | 默认值   | 必填   | 描述                                       |
24| --------- | ------- | ----- | ---- | ---------------------------------------- |
25| index     | number  | 0     | 否    | 当前在容器中显示的子组件的索引值。                        |
26| indicator | boolean | true  | 否    | 是否启用导航点指示器，默认true。true为启用导航点指示器，false为不启用。                       |
27| digital   | boolean | false | 否    | 是否启用数字导航点，默认为false。true为启用数字导航点，false为不启用。<br/>必须设置indicator时才能生效数字导航点。 |
28| loop      | boolean | true  | 否    | 是否开启循环滑动。true为开启循环，false为关闭循环。                                |
29| duration  | number  | 0     | 否    | 子组件切换的动画时长。<br/>单位：毫秒<br/>取值范围：[0, +∞)                              |
30| vertical  | boolean | false | 否    | 是否为纵向滑动。true为纵向滑动，false为水平滑动。纵向滑动时采用纵向的指示器。                   |
31
32
33## 样式
34
35除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
36
37| 名称                                 | 类型                                       | 默认值  | 必填   | 描述                   |
38| ---------------------------------- | ---------------------------------------- | ---- | ---- | -------------------- |
39| indicator-color                    | &lt;color&gt;                            | -    | 否    | 导航点指示器的填充颜色。         |
40| indicator-selected-color           | &lt;color&gt;                            | -    | 否    | 导航点指示器选中的颜色。         |
41| indicator-size                     | &lt;length&gt;                           | 4px  | 否    | 导航点指示器的直径大小。         |
42| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | -    | 否    | 导航点指示器在swiper中的相对位置。 |
43
44
45## 事件
46
47支持[通用事件](js-service-widget-common-events.md)。
48
49
50## 示例
51
52
53```html
54<!-- xxx.hml -->
55<swiper class="container" index="{{index}}">
56  <div class="swiper-item primary-item">
57    <text>1</text>
58  </div>
59  <div class="swiper-item warning-item">
60    <text>2</text>
61  </div>
62  <div class="swiper-item success-item">
63    <text>3</text>
64  </div>
65</swiper>
66```
67
68
69```css
70/* xxx.css */
71.container {
72  left: 0px;
73  top: 0px;
74  width: 454px;
75  height: 454px;
76}
77.swiper-item {
78  width: 454px;
79  height: 454px;
80  justify-content: center;
81  align-items: center;
82}
83.primary-item {
84  background-color: #007dff;
85}
86.warning-item {
87  background-color: #ff7500;
88}
89.success-item {
90  background-color: #41ba41;
91}
92```
93
94
95```json
96{
97  "data": {
98    "index": 1
99  }
100}
101```
102**4*4卡片**
103
104![卡片swiper](figures/swiper.png)
105
106