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