(Taro篇)如何自定义小程序Swiper面板指示点的样式

效果图

轮播组件jsx

import {
    
    Component} from 'react'
import {
    
    Swiper, SwiperItem, Image, View} from '@tarojs/components'
import './index.scss'

export default class SwiperBanner extends Component {
    
    

  static defaultProps = {
    
    
    list: []
  }
  state = {
    
    
    currentIndex:0
  }
  onChange(e){
    
    
    this.setState({
    
    currentIndex:e.detail.current})
  }
  render() {
    
    
    const {
    
    list} = this.props
    const {
    
    currentIndex} = this.state
    return (
      <View>
        <Swiper
          className='swiper-body'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          current={
    
    currentIndex}
          duration={
    
    500}
          interval={
    
    5000}
          circular
          autoplay
          // indicatorDots //隐藏原始指示点
          onChange={
    
    this.onChange.bind(this)}
        >
          {
    
    list.map((item, index) => (
            <SwiperItem key={
    
    index}>
              <Image src={
    
    item} className='slide-image' mode='widthFix' />
            </SwiperItem>
          ))}
        </Swiper>
        // 添加自定义指示点
        <View className='spot-pagination'>
          {
    
    list.map((item, index) => (
            <View key={
    
    index} className={
    
    'spot-pagination-bullet ' + ((currentIndex==index)?'spot-pagination-bullet-active':'')}></View>
          ))}
        </View>
      </View>
    )
  }
}

CSS样式

.swiper-body {
    
    
  height: 200PX;
  border-radius: 30px !important;
  overflow: hidden;
  .slide-image{
    
    
    height: 180PX;
    width: 100%;
    border-radius: 30px !important;
    overflow: hidden;
  }
}
// 指示点样式
.spot-pagination {
    
    
  margin-top: 10PX;
  display: flex;
  justify-content: center;
  .spot-pagination-bullet{
    
    
    margin-right: 5PX;
    border-radius: 20%;
    height: 6PX;
    width: 30PX;
    background: #ccc
  }
  // 当前指示点样式
  .spot-pagination-bullet-active {
    
    
    background: orange;
  }
}