当前位置：首页 > news >正文

react-swipeable-views轮播图实现下方的切换点控制组件

news 2025/7/20 20:44:52

本文是react通过react-swipeable-views创建公共轮播图组件的续文

上一文我们创建了这样的一个轮播图组件
在这里插入图片描述
但我们已经看到的轮播图下面都会有小点展示当前所在的位置
但react-swipeable-views 并没有直接提供我们需要自己去编写这个组件

我们在components下的 rotationChart 创建一个 Pagination.jsx 组件

然后在同目录下创建一个样式文件我这里叫 Pagination.css
参考代码如下

.swiper-pagination{position: absolute;bottom: 10px;right: 10px;display: inline-block;height: auto;width: 100%;
}
ul {width: 100%;height: auto;text-align: center;
}
li {list-style: none;display: inline-block;height: 10px;width: 10px;border-radius: 50%;background-color:#ccc;margin: 0 3px;
}
li.selected {background-color:rgb(233,32,61);
}

Pagination.jsx 参开代码如下

import React from 'react';import './Pagination.css';export default class Pagination extends React.Component{render(){const quantity = this.props&&this.props.quantity?new Array(this.props.quantity).fill(1):[];const currentIndex = this.props&&this.props.currentIndex?this.props.currentIndex:0;return (<div className = "swiper-pagination"><ul>{quantity.map((element,index) => {return <liclassName = { currentIndex === index?'selected':'' }key = { index }></li>})}</ul></div>)}
}

这里我们又多接收了一个参数叫 currentIndex 判断如果 currentIndex 和当前下班的index相同则给与选中状态

那么我们来到 components/rotationChart下的index.jsx 更改代码如下

import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import Pagination from './Pagination';import './index.css';export default class Swiper extends React.Component{constructor(props){super(props);this.state = {currentIndex: 0}}handleChangeIndex = (index) => {this.setState({currentIndex: index})}render(){const banners = this.props&&this.props.banners?this.props.banners:[];const height = this.props&&this.props.height?this.props.height:"200px";const width = this.props&&this.props.width?this.props.width:"400px";return (<div className = "swiper" style = { {height,width} }><SwipeableViews onChangeIndex={ this.handleChangeIndex }>{banners.map((element ,index) => {return (<div className='swiper-view' key= { index }><img src={ element } alt=""/></div>)})}</SwipeableViews><Pagination currentIndex = { this.state.currentIndex } quantity = { banners.length }/></div>)}
}