HarmonyOS入门--swiper组件
-
前言：
Swiper为滑动容器，提供切换显示子组件的能力。
-
属性：
|
名称 |
类型 | 默认值 | 描述 |
| index | number | 0 | 当前显示的子组件的索引值 |
| autoplay | boolean | fasle | 子组件是否自动播放，自动播放状态下，导航点不可操作 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为ms |
| indicator | boolean | true | 是否启用导航点指示器，默认true |
| loop | boolean | true | 是否开启循环滑动 |
| vertical | boolean | false | 是否为纵向滑动，纵向滑动时采用纵向滑动的指示器 |
| duration | number | - | 子组件切换的动画时长 |
-
样式
| 名称 | 类型 | 默认值 | 描述 |
| indicator-color | - | 导航点指示器的填充颜色 | |
| indicator-selected-color | #ff007dff | 导航点指示器选中的颜色 | |
| indicator-size | 4px | 导航点指示器的直径大小 | |
| indicator-top/left/right/bottom | / | - | 导航点指示器在swiper中的相对位置 |
-
事件
| 名称 | 参数 | 描述 |
| change | { index: currentIndex } | 当前显示的组件索引变化时触发该事件 |
| rotation | { value: rotationValue } | 智能穿戴表冠旋转事件触发时的回调 |
-
方法
| 名称 | 参数 | 描述 |
| swipeTo | { index: numer（指定位置）} | 切换到index位置的子组件 |
| showNext | 无 | 显示下一个子组件 |
-
示例
设置autoplay进行自动播放，，时间间隔interval为2000ms，关闭循环播放loop，
item1 item2 item3 item4 /* xxx.css */.container{ width: 100%; height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center;}swiper{ width: 500px; height: 500px; indicator-color: white; indicator-selected-color: blue; indicator-size: 40px; indicator-top: 100px; overflow: hidden ;}.item{ width: 100%; height: 500px;}text{ width: 100%; text-align: center; margin-top: 150px; font-size: 50px; color: white;}实现结果为：item自动播放，到item4终止
-
案例--轮流播放图片
/* xxx.css */.container{ flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center; width: 100%; margin-top:100px;}swiper{ width: 100%; height: 500px;}.item{ justift-content:center; width: 100%; height: 500px;}.content{ margin-top: -120px; width: 70%; display: flex; justify-content: center; height: 100px;}.content_item{ padding: 5px; transform: scale(0.5);}.actived{ transform: scale(1); border: 1px solid #b20937ea;}// index.jsexport default{ data:{ index:0, list:[ {src:'common/hzw.png'}, {src:'common/jay.png'}, {src:'common/potter.png'} ] }, imageTo(index){ this.index=index; this.$element('swiper').swipeTo({index:index}); }, change(e){ this.index=e.index; }}结果实现：
