圖片輪播預覽

效果

實現

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