uni-app 自定義輪播圖 swiper 指示點位置和樣式

我們在使用 uni-app 的滑塊視圖容器 swiper 開發 H5前端頁面 輪播圖時，有時候需要對輪播圖的指示點的位置和樣式進行自定義。類似於下圖：

如圖，如果不對默認的指示點位置進行移動的話，就被下面的元素所覆蓋，因此此時我們必須對輪播圖的指示點進行自定義。這邊介紹一種最簡便的方式，就是采用深度作用選擇器 /deep/ 來完成。具體實現方式如下：

HTML 代碼：

1. <swiper class="banner-swiper screen-swiper square-dot"
2. style="height: 520rpx; width:750rpx; z-index: -1; margin-top: -110rpx;"
3. indicator-dots
4. autoplay
5. :interval="5000"
6. :duration="500">
7. <swiper-item v-for="(item, index) in bannerList" :key="index">
8. <image :src="item.url" mode="aspectFill"></image>
9. </swiper-item>
10. </swiper>

JS 代碼：

1. export default {
2. data() {
3. return {
4. bannerList: [{
5. url: '/static/img/pic_banner_1.jpg'
6. }, {
7. url: '/static/img/pic_banner_2.jpg'
8. }, {
9. url: '/static/img/pic_banner_3.jpg'
10. }]
11. }
12. }
13. }

SCSS 代碼：

//設置輪播的指示點大小
.uni-swiper-wrapper {
    /deep/ .uni-swiper-dots { // 指示點整個區域
        // bottom: 100rpx;
    }
    /deep/ .uni-swiper-dot { // 指示點元素默認樣式
        width: 10upx !important;
        height: 10upx !important;
        // border: 1rpx solid #E0B079;
    }
    /deep/ .uni-swiper-dot-active { // 指示點元素激活（當前選中）狀態樣式
        // background: #CD9763;
    }
}

 

如果需要對輪播圖 swiper 指示點位置和樣式做更多的自定義，都可以在上面的樣式中修改。如果對其自定義要求非常高，可以隱藏自帶的指示點，改用 <view> 標簽替代，這樣還能實現跨端兼容。