图片轮播预览

效果

实现

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%;}
    }
}