day01 | P8 swiper & swiper-item 轮播图

猫的咖啡店_

已于 2023-03-16 18:06:30 修改

阅读量73

点赞数

分类专栏：微信小程序文章标签： css css3 html javascript Powered by 金山文档

于 2023-03-16 17:38:55 首次发布

本文链接：https://blog.csdn.net/weixin_44953057/article/details/129593293

版权

微信小程序专栏收录该内容

14 篇文章 1 订阅

订阅专栏

轮播图容器组件和轮播图 item 组件

list-wxml

<!-- 轮播图结构 -->
<swiper class="swipper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="1500" circular>
    <!-- 第一个轮播图 -->
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <!-- 第二个轮播图 -->
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <!-- 第三个轮播图 -->
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>

list-wxss

/* 轮播图样式 */
.swipper-container {
    height: 150px;
}

.item {
    height: 100%;
    line-height: 150px;
    text-align: center;
}

swiper-item:nth-child(1) .item {
    background-color: lightgreen;
}

swiper-item:nth-child(2) .item {
    background-color: lightblue;
}

swiper-item:nth-child(3) .item {
    background-color: lightpink;
}