-
前言:
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 | <color> | - | 导航点指示器的填充颜色 |
indicator-selected-color | <color> | #ff007dff | 导航点指示器选中的颜色 |
indicator-size | <length> | 4px | 导航点指示器的直径大小 |
indicator-top/left/right/bottom | <length>/<percentage> | - | 导航点指示器在swiper中的相对位置 |
-
事件
名称 | 参数 | 描述 |
change | { index: currentIndex } | 当前显示的组件索引变化时触发该事件 |
rotation | { value: rotationValue } | 智能穿戴表冠旋转事件触发时的回调 |
-
方法
名称 | 参数 | 描述 |
swipeTo | { index: numer(指定位置)} | 切换到index位置的子组件 |
showNext | 无 | 显示下一个子组件 |
-
示例
设置autoplay进行自动播放,,时间间隔interval为2000ms,关闭循环播放loop,
<!-- xxx.hml-->
<div class="container">
<swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
scrolleffect="fade" loop="false">
<div class="item" style="background-color: #bf45ea;">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
<div class="item" style="background-color: #c88cee;">
<text>item4</text>
</div>
</swiper>
</div>
/* 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.hml-->
<div class="container">
<swiper duration="500" indicator="false" id="swiper" onchange="change">
<div class="item" for="item in list">
<image src="{{item.src}}"></image>
</div>
</swiper>
<div class="content">
<div class="content_item {{index == $idx?'actived':''}}" for="item in list" onclick="imageTo({{$idx}})">
<image src="{{item.src}}"></image>
</div>
</div>
</div>
/* 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.js
export 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;
}
}
结果实现: