珠海微网站建设,免费下载中国移动app,58和搜房那个网站做房产好,外贸建站推广公司本文是react通过react-swipeable-views创建公共轮播图组件的续文
上一文 我们创建了这样的一个轮播图组件 但我们已经看到的轮播图 下面都会有小点 展示当前所在的位置 但react-swipeable-views 并没有直接提供 我们需要自己去编写这个组件
我们在components下的 rotationCh…本文是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.propsthis.props.quantity?new Array(this.props.quantity).fill(1):[];const currentIndex this.propsthis.props.currentIndex?this.props.currentIndex:0;return (div className swiper-paginationul{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.propsthis.props.banners?this.props.banners:[];const height this.propsthis.props.height?this.props.height:200px;const width this.propsthis.props.width?this.props.width:400px;return (div className swiper style { {height,width} }SwipeableViews onChangeIndex{ this.handleChangeIndex }{banners.map((element ,index) {return (div classNameswiper-view key { index }img src{ element } alt//div)})}/SwipeableViewsPagination currentIndex { this.state.currentIndex } quantity { banners.length }//div)}
}这里我们用了 react-swipeable-views组件中的 onChangeIndex函数 监听了切换事件 返回一个参数
就是当前轮播图所在的下标 然后给到 Pagination组件 运行结果如下 此时 我们下方的三个小点就实现了 因为这个组件是自己写的 如果想改样式 直接在 Pagination.css中改就好了
