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

如何建设一个收费的影视图文网站主题资源网站建设反思

news 2025/11/6 0:53:56

如何建设一个收费的影视图文网站,主题资源网站建设反思,网站制作出名的公司,品牌建设典型案例材料本文是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.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>)}
}