學習微信小程式的第三天——swiper實作輪播圖

學習緻謝

​​https://www.bilibili.com/video/BV1834y1676P?p=10&spm_id_from=pageDriver&vd_source=eea46c4b2d8e22202f61369ffd3e079d​​

一、示範效果

二、代碼

<!--輪播圖的結構---->
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="grey" autoplay interval="1000" circular>

    <!---第一個輪播圖--->
    <swiper-item>
        <view class="item">盧</view>
    </swiper-item>
    <!---第二個輪播圖--->
    <swiper-item>
        <view class="item">本</view>
    </swiper-item>
    <!---第三個輪播圖--->
    <swiper-item>
        <view class="item">偉</view>
    </swiper-item>
        <!---第四個輪播圖--->
        <swiper-item>
        <view class="item">牛</view>
    </swiper-item>
        <!---第五個輪播圖--->
        <swiper-item>
        <view class="item">逼</view>
    </swiper-item>
</swiper>      

/*輪播圖樣式*/
.swiper-container{
    height:150px;
}
.item{
    height: 150px;
    line-height:150px;
    text-align:center;
}
swiper-item:nth-child(1) .item{
    background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
    background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightgrey;
}
swiper-item:nth-child(4) .item{
    background-color: lightseagreen;
}
swiper-item:nth-child(5) .item{
    background-color: lightyellow;
}