html 部分
<view class="wrap">
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"current="
{{currentSwiper}}" bindchange="swiperChange" circular="{{circular}}" class='swiper'>
<block wx:for="{{imgs}}" wx:key="item">
<swiper-item>
<image src="{{item.url}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<!--重置小圆点的样式 -->
<view class="dots">
<block wx:for="{{imgs}}" wx:key="item">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
css部分
.wrap{
height: auto;
position: relative;
}
.swiper{
width:100%;
height: 560rpx;
}
.slide-image{
width:100% ;
}
/*用来包裹所有的小圆点 */
.dots{
width: 156rpx;
height: 36rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 320rpx;
bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.dot{
width: 26rpx;
height: 16rpx;
border-radius: 3rpx;
margin-right: 26rpx;
background-color: rgba(255,255,255,0.5);
}
/*选中以后的小圆点样式 */
.active{
width: 46rpx;
height: 16rpx;
background-color:white;
}
js部分
Page({
data: {
imgs: [
{ url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'},
{ url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' },
{ url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'},
{ url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' }
],
currentSwiper: 0,
autoplay: true,
interval: 5000,
duration: 1000,
circular:true
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
}