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

????系列专栏：微信小程序 ????欢迎关注????点赞????收藏⭐留言???? ????个人主页：​​hacker_demo的51CTO博客​​ ????个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待????????????

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

✅显示指示点颜色

✅设置指示点颜色

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

✅设置1秒自动切换

✅设置衔接滑动

结束语????

以上就是微信小程序之swiper和swiper-item组件的基本使用，创作不易多多支持???????????? 你们的支持就是hacker创作的动力????????????