微信小程式 自定義輪播圖指示點
阿新 • • 發佈:2021-01-18
<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; }