react实现图片轮播预览
效果
实现
js代码：
import React, { Component } from 'react';import Carousel from 'nuka-carousel';
import './largePreview.scss';
const Index = props => {
return props.visible ? <LargePriview {...props} /> : null;
};
/**
* @param {Array} pics 图片数组 [ {img: ''}, {img: ''} ]
* @param {boolean} visible 是否展示大图预览
* @param {number} currentIndex 当前是第几张图片,数组下标
* @param {function} close 关闭当前图片预览
*/
class LargePriview extends Component {
constructor(props) {
super(props);
this.state = {
screenHeight: '100%',
currentIndex: 1,
toggleBarHeight: 0,
pics: []
};
}
componentWillMount = () => {
if (navigator.userAgent.indexOf('cheshangtong') > -1) {
this.setState({
pics: JSON.parse(WBCST.getParamFromUrl('pic')),
currentIndex: Number(WBCST.getParamFromUrl('index'))
});
} else {
this.setState({
pics: this.props.location.param.pic,
currentIndex: this.props.location.param.index
});
}
WBCST.toggleTitlePanel(
{
hideNavBar: true,
bounces: 0,
statusBarStyle: 'light'
},
data => {
this.setState({
toggleBarHeight: data.toggleBarHeight
});
}
);
};
componentDidMount() {
const screenHeight = (document && document.body.clientHeight) || '100%';
this.setState({
screenHeight
});
}
screenHeight = () => {
const screenHeight = (document && document.body.clientHeight) || '100%';
let clientWidth = document.querySelector('body').offsetWidth;
const { toggleBarHeight } = this.state;
let height =
toggleBarHeight > 50 ? toggleBarHeight : toggleBarHeight + (45 / 375) * clientWidth;
return screenHeight - height;
};
handleImgClick(show, index) {
this.setState({
currentIndex: index
});
}
handleTop = () => {
const { toggleBarHeight } = this.state;
let clientWidth = document.querySelector('body').offsetWidth;
let top =
toggleBarHeight > 50 ? toggleBarHeight - (45 / 375) * clientWidth : toggleBarHeight;
return top;
};
render() {
const { screenHeight, currentIndex, pics } = this.state;
return (
<div className="imgs-large-wrapper">
<div style={{ height: this.handleTop() }} className="pre-status"></div>
<div className="imgs-top-float">
<div
className="close"
onClick={() => {
if (navigator.userAgent.indexOf('cheshangtong') > -1) {
WBCST.closeCurrentPage();
} else {
this.props.history.go(-1);
}
}}></div>
<div className="imgs-index-style">
{currentIndex + 1}/{pics.length}
</div>
<div className="right"></div>
</div>
<div>
<Carousel
autoplay={false}
slideIndex={currentIndex}
defaultControlsConfig={{
nextButtonText: '',
prevButtonText: '',
nextButtonStyle: {
display: 'none'
},
prevButtonStyle: {
display: 'none'
},
pagingDotsStyle: { display: 'none' }
}}
afterSlide={index => {
this.handleImgClick(true, index);
}}>
{pics.map((imgItem, imgIndex) => {
return (
<div
className="imgs-carousel-box"
style={{ height: this.screenHeight() }}
key={imgIndex}>
<img src={imgItem} />
</div>
);
})}
</Carousel>
</div>
</div>
);
}
}
export default LargePriview;
css代码：
$baseFontSize:32px !default;//pixels to rems
@function pxToRem($px){
@return $px / $baseFontSize * 1rem;
}
.imgs-large-wrapper {
height: 100%;
width: 100%;
background: #000000;
overflow: hidden;
.pre-status{
background: #000000;
}
.imgs-top-float {
width: 100%;
height: pxToRem(88px);
display: flex;
align-items: center;
padding: 0 pxToRem(30px);
flex-direction: row;
justify-content: space-between;
.close{
background: url('./../../img/close.png');
background-repeat: no-repeat;
background-size: 100%;
width: pxToRem(60px);
height: pxToRem(60px);
}
.imgs-index-style {
width: 100%;
font-size: pxToRem(34px);
font-family: PingFang-SC-Bold,PingFang-SC;
color:#FFFFFF;
text-align: center;
}
.right{
width: pxToRem(60px);
}
}
.imgs-carousel-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
}
}
}
以上是 react实现图片轮播预览 的全部内容， 来源链接： utcz.com/a/20774.html
