自定義微信小程序swiper輪播圖面板指示點(diǎn)的樣式

  1. 微信小程序的swiper組件是滑塊視圖容器，不過(guò)這個(gè)組件有很多樣式是固定的，有時(shí)候我們的設(shè)計(jì)稿的面板指示點(diǎn)是需要個(gè)性化的，比如位置和樣式


    3614068-9a73de7397511895.png

    3614068-82de58c1a4125333.png
3614068-47224a32f310890c.jpg
3614068-96434cda9f09bfc4.png

樣式

.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);   

}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容