<!--components/swiper/swiper.wxml-->

<view class="container">
? ? <swiper class="swiper-box" bind:change="swiperChange" interval="4000" circular autoplay>
? ? ? ? <block wx:for="{{swiperList}}" wx:key="index">
? ? ? ? ? ? <swiper-item>
? ? ? ? ? ? ? ? <image class="targetImg" src="{{item}}" mode="aspectFill"></image>
? ? ? ? ? ? </swiper-item>
? ? ? ? </block>
? ? </swiper>
? ? <!--重置小圓點的樣式 ?-->
? ? <view class="dots">
? ? ? ? <view class="dotsBox" style='width:{{(swiperList.length*26+swiperList.length*10) + "rpx"}}'>
? ? ? ? <!-- <view class="dotsBox" style='width:180rpx'> -->
? ? ? ? ? ? <block wx:for="{{swiperList}}" wx:key="index">
? ? ? ? ? ? ? ? <text class="dot {{index == currentIndex ? 'dot-active' : ''}}"></text>
? ? ? ? ? ? </block>
? ? ? ? </view>
? ? </view>
</view>

Component({
? properties: {
? ? swiperList: {
? ? ? type: Array,
? ? ? value: []// 默認數據（可以從引用組件處的屬性傳入該屬性值）
? ? }
? },
? data: {
? ? currentIndex: 0 ?// 初始高亮下標
? },
? methods: {
? ? /* 這里實現控制自定義輪播指示點高亮 */
? ? swiperChange(e) { ? ??
? ? ? this.setData({
? ? ? ? currentIndex: e.detail.current
? ? ? }) ? ? ?
? ? }
? }
})

/* components/swiper/swiper.wxss */
.container {
? position: relative;
}

.swiper-box {
? width: 100%;
? height: 364rpx;
}

.targetImg {
? width: 100%;
? height: 100%;
}

/*小圓點 ?*/
.dots {
? width: 100%;
? height: 4rpx;
? display: flex;
? position: absolute;
? bottom: 30rpx;
}

.dotsBox {
? height: 4rpx;
? display: flex;
? margin: 0 auto;
}

/*未選中時的小圓點樣式 */
.dot {
? width: 26rpx;
? height: 4rpx;
? border-radius: 2rpx;
? margin-right: 10rpx;
? background-color: #ffffff;
? opacity: 0.4;
}

/*選中以后的小圓點樣式 ?*/
.dot-active {
? opacity: 1;
}

{
? "usingComponents": {
? ? "w-swiper":"/components/swiper/swiper"
? }
}

<w-swiper swiperList="{{sprList}}" />

data:{
? ? sprList:['/images/img.png','/images/img.png'],
}