微信小程序swiper轮播自定义indicator-dots样式

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

index.wxml

<view class="swiperContainer">
  <swiper bindchange="swiperChange"    autoplay="{{autoplay}}"  duration="{{duration}}" style='height: 660rpx;'>
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item wx:key="*this">
        <image src="{{item}}" class="slide-image"  class='img'  />
      </swiper-item>
    </block>
  </swiper>
  <view class="dots">
    <block wx:for="{{imgUrls}}" wx:key="*">
      <view class="dot{{index == current ? ' active' : ''}}"></view>
    </block>
  </view>  
</view>

index.wxss

.swiperContainer {
  position: relative;
}
.img {
 width: 100%;
 height: 100%
}
.imageCount {
  width:120rpx;
  height:50rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius:40rpx;
  line-height:50rpx;
  color:#fff;
  text-align:center;
  font-size:26rpx;
  position:absolute;
  left:13px;
  bottom:20rpx;
}


.dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100rpx;
  display: flex;
  justify-content: center;
}
.dots .dot{
  margin: 0 5rpx;
  width: 50rpx;
  height: 8rpx;
  background: #999;
  border-radius: 8rpx;
  transition: all .6s;
}
.dots .dot.active{
  width: 50rpx;
  background: #333;
}

index.js

// pages/goodsDetails/goodsDetails.js
Page({ 
  data: {
    duration: "500",
    imgUrls: [
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360',
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360',
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360',
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360'
    ],
    current: 0,
  },
  swiperChange: function(e) {
    var that = this;
    if (e.detail.source == 'touch') {
      that.setData({
        current: e.detail.current,

      })
    }
  }, 
  onLoad: function(options) {

  }, 
  onShow: function() {

  },
 
})