微信小程序swiper輪播圖組件使用方法詳解

<!--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'],
}