애플릿 구성요소 스와이퍼 - 패널 표시점의 스타일을 수정하는 방법

공식 문서에서 스와이퍼의 표시 지점은 기본적으로 원이며 색상은 수정만 가능합니다. 모양을 수정하려는 경우 두 가지 아이디어가 있습니다.

1. 공식 패널 지표 포인트를 숨기고(공식 속성은 숨길 수 있음) 보기로 구성 요소를 다시 작성합니다(개인적으로 이것이 더 번거롭다고 생각하므로 이 문서에서는 설명하지 않음)

2. swiper에서 포인팅 포인트를 제어하는 ​​클래스를 찾아 스타일을 수정합니다.

 

두 번째 방법에서 표시점 스타일을 수정하는 방법은 무엇입니까?

우선: 여러 클래스 스와이퍼에서 포인팅 포인트를 제어하는 ​​클래스를 이해해야 합니다. 

1.wx-swiper-dot는 도트의 클래스 이름을 나타냅니다.   

2.wx-swiper-dot-active 현재 표시 포인트의 클래스 이름  

이 두 클래스 이름을 사용하면 색상 스타일을 변경하는 것이 비교적 간단합니다.  

별로 말도 안 돼, 코드로 이동

<template>
  <swiper circular="true" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <block v-for="(item, index) in imgList" :key="index">
          <swiper-item>
              <image :src="item" class="slide-image" mode="aspectFill"/>
          </swiper-item>
      </block>
  </swiper> 
</template>
<script>
export default {
  data () {
    return {
      indicatorDots: true, // 是否显示面板指示点
      autoplay: true, // 是否自动切换
      interval: 5000, // 自动切换时间间隔
      duration: 500 // 滑动动画时长
    }
  },
  props: ['imgList']
}
</script>
<style lang="scss" scoped>
.swiper {
  width: 690rpx !important;
  height: 270rpx !important;
  margin: 0 auto;
}
image {
  height: 100%;
  width: 100%;
}

// 指示点样式
.swiper /deep/ .wx-swiper-dot{ 
  height: 12rpx;
  width: 12rpx;
  background: rgba(255, 255, 255, .6)
  }
// 当前指示点样式
.swiper /deep/ .wx-swiper-dot-active{
    width: 36rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: rgba(255, 255, 255, .8)
}

</style>

.