小程式輪播圖自定義指示器

如何自定義微信小程式中輪播圖元件指示器的樣式呢？

方式一(推薦)

• step1
  給swiper的父元素新增類名

<view class="swiper">
  <swiper 
  indicator-dots="{{true}}"
  >
    <swiper-item>
        111
    </swiper-item>
    <swiper-item>
        222
    </swiper-item>
    <swiper-item>
        333
    </swiper-item>
  </swiper>
</view>

• step2
  給用到swiper的自定義元件所在的頁面定義指示器的樣式

.swiper .wx-swiper-dot{
  width:30px;
  height:10px;
  border-radius:10px;
}
.swiper .wx-swiper-dot-active{
  background-color:orange;
}

• step3
  給自定義元件設定可共享父級元素樣式

  Component({
    options:{
      styleIsolation:"apply-shared"
    }
})

方式二

禁用自帶的指示器，自己寫一個指示器定位到輪播圖上