✅持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

✅个人主页：hacker707的掘金博客

🎉欢迎关注👀点赞👍收藏⭐留言📝

🔥系列专栏：微信小程序

💬个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待💖💖💖

实现轮播图效果

在这里插入图片描述

list.wxml

<!--轮播图的结构-->
<swiper class="swiper-container">
    <!--第一个轮播图-->
    <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

/* 轮播图样式 */
.swiper-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: lightskyblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightpink;
}

swiper组件的常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板提示点
indictor-color	color	rgba(0,0,0,3)	指示点颜色
indictor-active-color	color	#000000	当前选择的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动