alloy_viewer H5图片查看器

例子

https://alloyteam.github.io/AlloyViewer/examples/

使用说明

// 例 1:

import React, { Component } from 'react'
import ImageView from 'react-imageview'

import 'react-imageview/dist/react-imageview.min.css'

class Main extends Component {
    state = {
        showViewer: false
    }
    render() {
        const imagelist = ['./1.png','./2.png','./3.png','./4.png']
        return (
            <div>
                {
                    !!this.state.showViewer && <ImageView imagelist={imagelist} close={this.close.bind(this)} />
                }
                <button onClick={e=>this.show()}>click me to show Alert</button>
            </div>
        )
    }
    show() {
        this.setState({ showViewer: true })
    }
    close() {
        this.setState({ showViewer: false})
    }
}

// 例 2（推荐使用）:

import { SingleImgView } from 'react-imageview'
import 'react-imageview/dist/react-imageview.min.css'

const imagelist = ['./1.png','./2.png','./3.png','./4.png']

// 仅创建一个ImageView实例
SingleImgView.show({ 
    imagelist, 
    close: () => { SingleImgView.hide() } 
});

配置说明

参数	类型	描述	必需	默认值
imagelist	array	要预览的图片列表	是	无
current	number	当前展示的图片序号（从0开始）	否	0
close	function	图片查看器关闭方法	是
gap	number	轮播图间距	否	30
maxScale	number	最大缩放倍数	否	2
disablePinch	bool	禁用缩小放大	否	false
enableRotate	bool	启用旋转	否(默认关闭)	false
disableDoubleTap	bool	禁用双击放大	否	false
initCallback	function	初始化后回调	否
longTap	function	长按回调	否
changeIndex	function	轮播后回调	否

官方的

https://github.com/AlloyTeam/AlloyViewer