小程序开发问题之自定义swiper指示点

微信官方提供的swiper的指示点是小圆形，位置在swiper中间靠近底部位置。如

而产品的要求是需要将指示点方式在右下角，同时是条形。如

思路：不显示swiper自带的指示点，根据banner数据集合的长度显示指示点。根据swiper的滑动更新指示点的状态。

 

wxml：

<view class="swiper-group">
    //创建一个swiper 
    //indicator-dot="false" 不显示自带的指示点
    <swiper class="swiper" bindanimationfinish="swiperAnimationListener" indicator-dot="false" autoplay="true" interval="2000" duration="1000" current="{{swiperCurrent}}">
          <view class="swiper-item" wx:for="{{imgs}}" wx:key="*this">
             <swiper-item>
                <image src="{{item}}"></image>
                <view class="view-info-group">
                   <view class="text-info-title">深圳订单 上门回收</view>
                   <view class="text-info-des">这是一个专业的奢侈品回收平台</view>
                   <view class="text-info-des">全面解锁您对奢侈品回收的认知</view>
                </view>
             </swiper-item>        
          </view>
    </swiper>
    //根据数组长度创建指示点
    <view class="point-group">
          <view class="point{{index==swiperCurrent?' active':''}}" wx:for="{{imgs}}" wx:key="unique"></view>
    </view>
</view>

wxss：

.swiper-group{
  position: relative;
}

.swiper{
   height: 802rpx;
   width: 750rpx;
}

.swiper-item image{
  height: 802rpx;
   width: 750rpx;
}

//设置指示点为横向排列
.point-group{
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

//设置指示点的长度和状态
.point-group .point{
  width: 50rpx;
  height: 5rpx;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 5rpx;
}

//设置指示点选中时的状态
.point-group .point.active{
  background: #fff;
}

js：

Page({
  data: {
    imgs:[
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    swiperCurrent:0,
  },

  //当swiper滑动完成后，更新swiperCurrent.swiperCurrent用于记录当前显示banner的index
  swiperAnimationListener:function(e){
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

  onLoad: function () {},

})

当 swiperCurrent更新后，会去判断

    <view class="point-group">
          <view class="point{{index==swiperCurrent?' active':''}}" wx:for="{{imgs}}" wx:key="unique"></view>
    </view>

当index 和 swiperCurrent相等时，指示器就显示被选中的状态，其他的就显示平时的状态。