小程序 轮播指示点手动实现

版权声明：多总结，帮助自己的同时也在帮助别人！留下意见和看法，让技术动起来！ https://blog.csdn.net/qiphon3650/article/details/82151207

由于原生的点限制太多，这里展示下，手动自己实现指示点
html

<!--  轮播图  -->
  <swiper class='banner-top' indicator-dots="{{false}}" autoplay="{{true}}" interval="{{4500}}" duration="{{666}}" circular="{{true}}" indicator-color="#D8D8D8" indicator-active-color="#FF5C5C" bindchange="bannerChange"> 
    <block wx:for="{{bannerList}}" wx:key="{{index}}">
      <swiper-item class="swiper-item">
        <image src="{{item.image}}" class="slide-image" data-goods="{{item.id}}" bindtap="toDetail" />
        <view class='banner-title'>{{item.name}}</view>
      </swiper-item>
    </block>
  </swiper>
  <view class='banner-dot'>
    <view class='item-dot {{index == swiperCurrent ? "active-dot": ""}}' wx:for="{{bannerList}}" wx:key="{{index}}"></view>
  </view>

css

 swiper-item {
  position: relative;
  padding: 20rpx 20rpx 0;
  width: 100vw;
}
.banner-title{
  position: absolute;
  bottom:0;
  left:20rpx;
  padding-left:32rpx;
  height: 56rpx;
  font-size: 28rpx;
  line-height: 56rpx;
  width:calc(100% - 40rpx);
  color:#fff;
  background:rgba(51,51,51,.4);
}
.banner-dot{
  width:100%;
  text-align: center;
  position: absolute;
  top:215rpx;
}
.item-dot{
  width:18rpx;
  height: 18rpx;
  background:#d8d8d8;
  display: inline-block;
  border-radius: 50%;
}
.item-dot + .item-dot{
  margin-left:16rpx;
}
.active-dot{
  background:#FF5C5C;
}

js

  bannerChange(e){
    // console.log(e)
    this.setData({
      swiperCurrent:e.detail.current
    })
  }