小程序默认swiper样式
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/65a0207572e8c103d05897ff191f4a5f.png)
修改后的样式
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/51a7038111377263c5f36fa35dc262ce.png)
wxml
<!-- 轮播图 -->
<view class="swiper">
<swiper autoplay="true" interval="5000" duration="500" current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item class="swiper-item imgbox">
<image src="{{item.url}}" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{background}}">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<!-- 轮播图 -->
css
.swiper {
position: relative;
}
.dots {
width: 160rpx;
height: 10rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 20rpx;
}
.dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin:0px 10rpx;
background: white;
}
.active {
width: 100rpx;
height: 10rpx;
border-radius: 10px;
background: red;
}
js
Page({
data: {
background: [{'url':'../../images/img1.jpg'},{'url':'../../images/img2.jpg'},{'url':'../../images/img3.jpg'}],
currentSwiper: 0,
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
}
})