效果
实现
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%; } }}