如何自定義小程序swiper輪播圖面板指示點樣式

這篇文章給大家分享的是有關如何自定義小程序swiper輪播圖面板指示點樣式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

微信小程序的swiper組件是滑塊視圖容器，也就是說平常我們看到的輪播圖就可以用它來做，不過這個組件有很多樣式是固定的，但是，有時候我們的設計稿的面板指示點是需要個性化的，那么如何去修改swiper組件的面板指示點的樣式呢？最近在使用swiper的時候也在想這個，最后發現在調試的時候，可以看到他的選擇器。

具體代碼如下所示：

<swiper class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}"><block wx:for="{{ swiperItem }}"><swiper-item><navigator url="{{ item.linkUrl }}"><image class="slide-image" src="{{ item.imgUrl }}"></image> 
            </navigator></swiper-item></block>
</swiper>

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot{
    width:40rpx;
    display: inline-flex;
    height: 10rpx; 
    margin-left: 20rpx;
    justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
    content: '';
    flex-grow: 1;  
    background: rgba(255,255,255,0.8);
    border-radius: 8rpx
}
.swiper-box .wx-swiper-dot-active::before{
    background:rgba(244,0,0,0.8);    
}

感謝各位的閱讀！關于“如何自定義小程序swiper輪播圖面板指示點樣式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！