如何自定義微信小程式swiper輪播圖面板指示點的樣式
阿新 • • 發佈:2019-01-08
微信小程式的swiper元件是滑塊檢視容器,也就是說平常我們看到的輪播圖就可以用它來做,不過這個元件有很多樣式是固定的,但是,有時候我們的設計稿的面板指示點是需要個性化的,那麼如何去修改swiper元件的面板指示點的樣式呢?最近在使用swiper的時候也在想這個,最後發現在除錯的時候,可以看到他的選擇器。如圖:
1 2 3 4 5 6 7 8 9 |
< 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 >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.swiper-box
.wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom : 2 rpx;
}
.swiper-box
.wx-swiper-dot{
width : 40 rpx;
display :
inline-flex;
height : 10 rpx;
margin-left : 20 rpx;
justify- content :space-between;
}
.swiper-box
.wx-swiper-dot::before{
content : '' ;
flex-grow: 1 ;
background :
rgba( 255 , 255 , 255 , 0.8 );
border-radius: 8 rpx
}
.swiper-box
.wx-swiper-dot-active::before{
background :rgba( 244 , 0 , 0 , 0.8 );
}
|
雖然可以通過上面的程式碼修改swiper面板指示點的樣式,但是還是有侷限性的,不過總算可以修改了,在此簡單記錄一下。。