一款基于react的图片预览组件,特别适合于异步获

react-image-viewer-mobile

A ReactJS image Viewer Component for mobile 一款基于react的图片预览组件,特别适合于异步获取的富文本中的图片,点击图片即可全屏显示,并且带有轮播效果。

demo

Install

npm install react-image-viewer-mobile --save Example

'use strict'; import React from 'react'; import NewsBox from '../NewsBox'; import ImagePreviewer from 'react-image-viewer-mobile' // import ImagePreviewer from '../../../dist/react-image-viewer-mobile.js' class News extends React.Component { render() { return ( <div> <ImagePreviewer async={true} /*图片内容是否异步*/ imageWrapperHeight={300} /*图片容器高度*/ opacity={1} /*背景透明度*/ zIndex={1000} /*图层层级*/ gap={10} /*图片间隙*/ > <NewsBox content={this.props.content}/> /*异步获取的富文本*/ </ImagePreviewer> </div> ); } } export default News

//新闻内容组件 NewsBox import React from 'react'; class NewsBox extends React.Component { render() { return ( <div dangerouslySetInnerHTML={{__html: this.props.content}}> </div> ); } } export default NewsBox Running demo locally

The demo can be launched on local machine via webpack-dev-server. Run the following:

webpack-dev-server --config webpack.dev.config.js --color --progress Props

Property Description Type default Remarks
async is images async? Boolean false 图片内容是否异步
zIndex the depth of the layer Number 1000 图层层级
gap the gap between images Number 10 图片间隙
opacity the backgroup modal's opacity Number 1 背景透明度
imageWrapperHeight the height of image wrapper Number 300 图片容器高度
version v1.1.0 fixbug 异步内容update导致的溢出 轮播组件更换成更加流畅的nuka-carousel v1.1.1 fixbug 组件componentWillUnmount时解绑报错 Reference react-wx-images-viewer nuka-carousel

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。