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

沐言TalkMu

已于 2022-11-07 09:35:26 修改

阅读量2.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Taro React 文章标签： react.js css html

于 2021-09-15 17:25:40 首次发布

本文链接：https://blog.csdn.net/qq_27121281/article/details/120313046

Taro 同时被 2 个专栏收录

1 篇文章

订阅专栏

React

1 篇文章

订阅专栏

该博客介绍了如何在React项目中利用Taro库构建一个轮播组件，包括设置基本属性如自动播放、切换动画等，并且详细展示了如何自定义指示点的样式和交互。示例代码中包含了jsx和对应的CSS样式，用于实现圆角轮播效果和橙色高亮的指示点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

轮播组件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;
  }
}