原生的轮播图的样式不是很好看,需要把轮播
图居中、圆边角、指示点颜色更改、指示点样式更改
下图是样式不好看的组件
要修改成这样::
wxml:
<swiper class="bd" indicator-dots="{{true}}" indicator-active-color="#ff8f00" autoplay="{{true}}" interval ="5000" duration="500"><swiper-item><view class='lbtp'><image src='/images/bannar/lbt1.jpg'></image></view></swiper-item><swiper-item><view class='lbtp'><image src='/images/bannar/lbt2.jpg'></image></view></swiper-item></swiper>
js:
/*轮播图指示点*/.bd .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 2rpx;}.bd .wx-swiper-dot{width:40rpx;/*点的长*/display: inline-flex;height: 10rpx; /*点的高*/margin-left: 5rpx; /*两个点的距离*/justify-content:space-between;}.bd .wx-swiper-dot::before{content: '';flex-grow: 1; background : #d7d7d7; /*点的未选中颜色*/border-radius: 8rpx}.bd .wx-swiper-dot-active::before{background:#ff8f00; /*点的选中颜色*/}
这样就可以有效果了,js里面有关键的注释,大家可以做修改。