1# swiper 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @Hu_ZeQi--> 5<!--Designer: @jiangdayuan--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12滑动容器，提供切换子组件显示的能力。 13 14## 权限列表 15 16无 17 18 19## 子组件 20 21可以包含子组件。 22 23 24## 属性 25 26除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 27 28| 名称 | 类型 | 默认值 | 必填 | 描述 | 29| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- | 30| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 | 31| autoplay | boolean | false | 否 | 子组件是否自动播放，自动播放状态下，导航点不可操作<sup>5+</sup>。true为自动轮播，false为不自动轮播。 | 32| interval | number | 3000 | 否 | 使用自动播放时播放的时间间隔，单位为ms。 | 33| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。true为启用导航点指示器，false为不启用导航点指示器。 | 34| digital<sup>5+</sup> | boolean | false | 否 | 是否启用数字导航点，默认为false。true为启用数字导航点，false为不启用数字导航点。<br/>必须设置indicator时才能生效数字导航点。 | 35| indicatordisabled<sup>5+</sup> | boolean | false | 否 | 指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。 | 36| loop | boolean | true | 否 | 是否开启循环滑动。true为开启循环，false为不开启循环。 | 37| duration | number | - | 否 | 子组件切换的动画时长。 | 38| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。true为纵向滑动，false为水平滑动。 | 39| cachedsize<sup>7+</sup> | number | -1 | 否 | swiper延迟加载时item最少缓存数量。-1表示全部缓存。 | 40| scrolleffect<sup>7+</sup> | string | spring | 否 | 滑动效果。目前支持如下：<br/>- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发生一定的变化。<br/>- none：滑动到边缘后无效果。<br/>该属性仅在loop属性为false时生效。 | 41 42 43## 样式 44 45除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 46 47| 名称 | 类型 | 默认值 | 必填 | 描述 | 48| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- | 49| indicator-color | <color> | - | 否 | 导航点指示器的填充颜色。 | 50| indicator-selected-color | <color> | \#ff007dff | 否 | 导航点指示器选中的颜色。 | 51| indicator-size | <length> | 4px | 否 | 导航点指示器的直径大小。 | 52| indicator-top\|left\|right\|bottom | <length> \| <percentage> | - | 否 | 导航点指示器在swiper中的相对位置。 | 53| next-margin<sup>7+</sup> | <length> \| <percentage> | - | 否 | 后边距，用于露出后一项的一小部分。 | 54| previous-margin<sup>7+</sup> | <length> \| <percentage> | - | 否 | 前边距，用于露出前一项的一小部分。 | 55 56 57## 事件 58 59除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 60 61| 名称 | 参数 | 描述 | 62| ---------------------------- | --------------------------------------- | ------------------ | 63| change | { index: currentIndex } | 当前显示的组件索引变化时触发该事件。 | 64| rotation | { value: rotationValue } | 智能穿戴表冠旋转事件触发时的回调。 | 65| animationfinish<sup>7+</sup> | - | 动画结束时触发该事件。 | 66 67## 方法 68 69除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 70 71| 名称 | 参数 | 描述 | 72| ------------ | -------------------------------------- | --------------- | 73| swipeTo | { index: number(指定位置) } | 切换到index位置的子组件。 | 74| showNext | 无 | 显示下一个子组件。 | 75| showPrevious | 无 | 显示上一个子组件。 | 76 77 78## 示例 79 80```html 81<!-- xxx.hml --> 82<div class="container"> 83 <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1" 84 scrolleffect="spring"> 85 <div class = "swiperContentOne" > 86 <text class = "text">First screen</text> 87 </div> 88 <div class = "swiperContentTwo"> 89 <text class = "text">Second screen</text> 90 </div> 91 <div class = "swiperContentThree"> 92 <text class = "text">Third screen</text> 93 </div> 94 </swiper> 95 <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input> 96 <input class="button" type="button" value="showNext" onclick="showNext"></input> 97 <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input> 98</div> 99``` 100 101```css 102/* xxx.css */ 103.container { 104 flex-direction: column; 105 width: 100%; 106 height: 100%; 107 align-items: center; 108} 109.swiper { 110 flex-direction: column; 111 align-content: center; 112 align-items: center; 113 width: 70%; 114 height: 130px; 115 border: 1px solid #000000; 116 indicator-color: #cf2411; 117 indicator-size: 14px; 118 indicator-bottom: 20px; 119 indicator-right: 30px; 120 margin-top: 100px; 121 next-margin:20px; 122 previous-margin:20px; 123} 124.swiperContentOne{ 125 height: 100%; 126 width: 100%; 127 justify-content: center; 128 background-color: #007dff; 129} 130.swiperContentTwo{ 131 height: 100%; 132 width: 100%; 133 justify-content: center; 134 background-color: #ff7500; 135} 136.swiperContentThree{ 137 height: 100%; 138 width: 100%; 139 justify-content: center; 140 background-color: #41ba41; 141} 142.button { 143 width: 70%; 144 margin: 10px; 145} 146.text { 147 font-size: 40px; 148} 149``` 150 151```js 152// xxx.js 153export default { 154 swipeTo() { 155 this.$element('swiper').swipeTo({index: 2}); 156 }, 157 showNext() { 158 this.$element('swiper').showNext(); 159 }, 160 showPrevious() { 161 this.$element('swiper').showPrevious(); 162 } 163} 164``` 165 166 167 168 169
