<view class="dots">

<block wx:for="{{slider}}" wx:key="unique">

<view class="dot{{index == swiperCurrent ? ' active' : ''}}">

  

.swiper-container{
  position: relative;
  height: 300rpx;
}
.swiper-container .swiper{
  height: 300rpx;
  width: 100%;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
.swiper-container .dots{
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}
 .swiper-container .dots .dot{
  margin: 0px 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all 0.6s;
}
.swiper-container .dots .dot.active{
  width: 24rpx;
  background: #f80;
} 

// pages/swipernew/swipernew.js
Page({
/**

页面的初始数据

*/

data: {

slider: [

{ picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg' },{ picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg' },{ picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg' }

],swiperCurrent: 0,},swiperChange: function (e) {

console.log(e);

this.setData({

swiperCurrent: e.detail.current

})

}

})