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

hacker707

发布于 2022-10-31 16:08:40

2.3K0

发布于 2022-10-31 16:08:40

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

swiper和swiper-item

实现轮播图效果

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	是否采用衔接滑动