AlloyViewer: A JavaScript repository from 腾讯 AlloyTeam

中文 | English

React图片查看器

使用React打造的H5图片查看器

特性

各类手势快速响应
急速滑动翻页
支持双指缩放、旋转、双击放大
支持放大后局部拖拽、翻页
支持超长(纵向)拼接图查看
支持下载
图片懒加载、预加载

示例

您可以下载代码在examples文件夹中找到例子或者在线示例

使用方法

1、安装NPM依赖

npm install react-imageview --save

2、随意使用

// 例 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	轮播后回调	否

English | 中文

react-imageview

Imageview component built with react

Demo

You can download the code and find demo in folder which is named as examples or demo online

Usage with React

1、Install the package