微信小程序自定义轮播图

效果图

 

index.wxml

 <!-- 轮播图 开始 -->
  <view class='index_top'>
    <view class='swiper_box'>
      <swiper class='swipers' circular="true" autoplay="true" current="{{currentSwiper}}" bindchange="swiperChange">
        <block wx:for="{{advimg}}" wx:key="index">
          <swiper-item>
            <!-- <image webp class="swiper_image" src="{{item.url}}" lazy-load="true" /> -->
            <image webp class="swiper_image" src="http://m.qpic.cn/psc?/V50Ejiq52ki2kb0slvNb49Rw423ZwJd9/ruAMsa53pVQWN7FLK88i5rD9SVYLZYJgvO3mER3JpbfjfWPcsEczP*qNicQqqW4f2rmOfjOTG26TU4pPVxXSY.WS2.CU67W7w*m1EI4UKak!/b&bo=zgHpAAAAAAADFxQ!&rf=viewer_4" lazy-load="true" />
          </swiper-item>
        </block>
      </swiper>
      <view class="dots">
        <block wx:for="{{advimg}}" wx:key="index">
          <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
        </block>
      </view>
    </view>
  </view>
  <!-- 轮播图 结束-->

index.wxss

// 轮播图 开始 
.swiper_box {
  height: auto;
  position: relative;
}

.swipers {
  // height: 280rpx;
  height: 380rpx;
}

.swiper_box image {
  width: 100%;
  height: 100%;
  // border-radius: 100% 100% 100% 100% /0% 0% 30% 30%;
}

/*用来包裹所有的小圆点  */

.dots {
  // width: 210rpx;
  height: 20rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5rpx;
}

/*未选中时的小圆点样式 */

.dot {
  width: 20rpx;
  height: 4rpx;
  border-radius: 14rpx;
  margin-right: 26rpx;
  background-color: #000000;
}

/*选中以后的小圆点样式  */

.active {
  width: 20rpx;
  height: 4rpx;
  background-color: #fff;
}

//  轮播图 结束

index.js

  data: {
   
    advImage: [{
      url: 'https://www.mescroll.com/demo/res/img/pd1.jpg'
    },
    {
      url: 'https://www.mescroll.com/demo/res/img/pd2.jpg'
    },
    {
      url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'
    },
    {
      url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'
    },
    {
      url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'
    },
    {
      url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'
    },
    ],
    currentSwiper: 0,
    indicatorColor: 'white',
    indicatorActivecolor: 'red'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(this.data.goods);
    this.setData({
      advimg: this.data.advImage,
    })
  },
  // 小圆点却换事件
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },