一、默认使用

indicator-dots,指示是否面板显示

indicator-color，指示点颜色

indicator-active-color，选中指示点颜色

wxml代码：

<swiper autoplay="{{autoplay}}"indicator-dots='true'indicator-active-color='red'interval="3000" duration="1000"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150" /></swiper-item></block>
</swiper>

js代码：

  data: {imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],autoplay: true,},

显示结果：

二、重定义，指示点样式

操作：禁用默认指示样式，自定义view显示，根据当前current，设置选中项

1.wxml定义

<view class='swiper'><swiper autoplay="{{autoplay}}"bindchange="swiperChange"current='{{curIndex}}' interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150" /></swiper-item></block></swiper><!-- 自定义指示 --><view class='dots'><view class='dot {{curIndex==index?"active":""}}' wx:for="{{imgUrls}}"></view></view>
</view>

2.js定义

  /*** 页面的初始数据*/data: {imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],autoplay: false,interval: 5000,duration: 1000,curIndex: 0},

3.css样式定义

.swiper {position: relative;
}.swiper image {width: 100%;
}.swiper .dots {position: absolute;left: 0;right: 0;bottom: 20rpx;display: flex;justify-content: center;
}.swiper .dots .dot {margin: 0 8rpx;width: 14rpx;height: 14rpx;background: #fff;border-radius: 8rpx;transition: all 0.6s;
}.swiper .dots .dot.active {width: 24rpx;background: red;
}

3.显示样式

更多：

微信小程序selectComponent获取自定义子组件

微信小程序组件间通信（二）

微信小程序组件间通信（一）