1. 程式人生 > 其它 >微信小程式 自定義輪播圖指示點

微信小程式 自定義輪播圖指示點

技術標籤:小程式get 技能

  <view>
    <swiper class="bgBox" indicator-dots="true"
        autoplay="true" interval="20000" duration="500" indicator-active-color='#FFFFFF'>
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="bgImg"><image src="{{item}}"></image></view>
          </swiper-item>
        </block>
      </swiper>
  </view>
/* 輪播圖指示點樣式 */
.bgBox .wx-swiper-dots.wx-swiper-dots-horizontal{ //控制指示點向下的距離
  margin-bottom: 78rpx;
}
.wx-swiper-dots{ //控制指示點左右的位置
  position:relative;
  left: unset!important;
  right: 0;
}

.bgBox .wx-swiper-dot{ //指示點初始樣式
  width:10rpx;
  height: 10rpx;
  background: white;
  border-radius: 10rpx;
}
.bgBox .wx-swiper-dot.wx-swiper-dot-active {//指示點選中的樣式
  width: 30rpx;
  height: 10rpx;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 13rpx;
}