微信小程序---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'],
}