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	<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;
    }
}

结果实现：