微信小程序 自定义swiper的底部指示点

<view>
	<swiper indicator-dots="true"
	autoplay="true" interval="3000" duration="1000">
		<block wx:for="{{imgUrls}}">
			<swiper-item>
			  <image mode="aspectFill" src="{{item}}" class="slideimage"/>
			</swiper-item>
		</block>
	</swiper>
</view>

page {
display: block;
min-height: 100%;
background: #eeeeee;
}
/*swiper属性*/
swiper{
height:480rpx;
}
/*slide图片属性*/
.slide-image{
width: 100%;
height:480rpx;
}
/*开启 底部 滚动条*/
page .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: -4rpx;
}
/*滚动条属性*/page .wx-swiper-dot{
width: 40rpx;
display: inline-flex;
height: 18rpx;
vertical-align: sub;/*垂直对齐文本的下标*/
}
/*默认滚动条属性*/
page .wx-swiper-dot::before{
content: '';
background: #e5e5e5;
flex-grow: 1;
}
/*选择时的滚动条属性*/
page .wx-swiper-dot-active::before{
content: '';
background:rgba(240,0,0,0.8);
flex-grow: 1;
}

Page({
	data: {
	imgUrls: [
	'http://wx.leadingdo.com/images/image1.jpg',
	'http://wx.leadingdo.com/images/image2.jpg',
	'http://wx.leadingdo.com/images/image3.jpg'
	],
	indicatorDots: true,//是否显示面板指示点
	autoplay: true,//自动切换
	interval: 3000,//自动切换时间间隔
	duration: 1000,//滑动动画时长
	circular: true//是否采用衔接滑动,循环滑动
	}
})