<view class='hot-box'>
    <view class='hot-header'>
      <view class='header-e'>GLOTHING</view>
      <view class='header-c'>热门</view>
    </view>
    <view class="dots">
      <block wx:for="{{img}}" wx:key="unique">
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
    </view>
    <view class='hot-swiper'>
      <swiper class='swiper' circular current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
        <block wx:for="{{img}}" wx:key="{{*this}}">
          <swiper-item>
            <image src="{{item.src}}" class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>

.hot-box .wx-swiper{
  background-color: #000;
}
.hot-box .dots{
  display: flex;
  justify-content: center;
  margin-bottom: 50rpx;
}
.hot-box .dots .dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  background-color: #b0b0b0;
}
.hot-box .dots .dot.active{
  width: 14rpx;
  background: #000;
}

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    img: [{
        "src": 'https://upload-images.jianshu.io/upload_images/12893060-11b6be97a02c1e5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
      },
      {
        "src": 'https://upload-images.jianshu.io/upload_images/12893060-11b6be97a02c1e5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
      },
      {
        "src": 'https://upload-images.jianshu.io/upload_images/12893060-11b6be97a02c1e5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
      }
    ],
    swiperCurrent: 0,
  },
  onLoad: function() {

  },
  swiperChange: function(e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  }
})