微信小程序的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面板指示點的樣式，但是還是有局限性的，不過總算可以修改了，在此簡單記錄一下。。
.