需求:写一个从左向右滚动的轮播图
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{
width: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;
}