HarmonyOS入门--swiper组件_swiper duration

• 前言：

        Swiper为滑动容器，提供切换显示子组件的能力。

• 属性：

• 样式

• 事件       

• 方法

• 示例

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

结果实现：