【微信小程序】swiper和swiper-item组件的基本使用

✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆
📃个人主页：hacker707的csdn博客
🔥系列专栏：微信小程序
💬个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待💖💖💖

实现轮播图效果

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

swiper组件的常用属性

✅显示指示点颜色

✅设置指示点颜色

✅设置当前选择的指示点颜色

✅设置1秒自动切换

✅设置衔接滑动

结束语

以上就是微信小程序之swiper和swiper-item组件的基本使用
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是hacker创作的动力💖💖💖