【小程序】轮播图

需求：写一个从左向右滚动的轮播图

wxml

<swiper class="banner" indicator-dots="true" autoplay="true" interval='3000' circular='true'>
    <block wx:for="{{bannerList}}" wx:key="key">
        <swiper-item>
            <image src='{{item.img}}' class="bannerImg"/>
        </swiper-item>
    </block>
</swiper>

/*几个有用的说明：
  indicator-dots 是否显示指示器
  indicator-color 指示器默认颜色
  indicator-active-color   指示器选中颜色
  autoplay 是否自动播放
  interval 每一页停留的时长
  circular 播放到最后一页后是否再衔接第一页循环播放
*/

js

bannerList:[
    {
        "id": "1",
        "img": "../../images/indexBanner.png"
    },
    {
        "id": "2",
        "img": "../../images/indexBanner.jpg"
    },
    {
        "id": "3",
        "img": "../../images/no_data.png"
    },
]                                    

 

需求：在改变原始的指示点的样式

wxss

.banner .wx-swiper-dots.wx-swiper-dots-horizontal{
    margin-bottom: 2rpx;
}


.banner .wx-swiper-dot{
    22rpx;
    display: inline-flex;
    height: 5rpx;
    margin-left: 10rpx;
    justify-content:space-between;
}
.banner .wx-swiper-dot::before{
    content: '';
    flex-grow: 1;
    background: #c2c2c2;
    border-radius: 5rpx;
}
.banner .wx-swiper-dot-active::before{
    background:#acbbf7;
    border-radius: 5rpx;
}