微信小程序swiper輪播圖組件如何使用

本篇內容介紹了“微信小程序swiper輪播圖組件如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在components中新建文件夾swiper

components/swiper/swiper.wxml

<!--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>

components/swiper/swiper.js

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

components/swiper/swiper.wxss

/* 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;
}

在pages文件中引用

json文件中

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

html文件中

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

js文件中

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

“微信小程序swiper輪播圖組件如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！