14.移动端图片浏览组件 react-wx-images-viewer

安装

npm install --save react-wx-images-viewer

使用

import WxImageViewer from 'react-wx-images-viewer';
class App extends Component { state = { imags: [ require('./assets/2.jpg'), require('./assets/1.jpg'), require('./assets/0.jpg'), require('./assets/3.jpg'), require('./assets/4.jpg'), ], index: 0, isOpen: false }; onClose = () =>{ this.setState({ isOpen: false }) } openViewer (index){ this.setState({ index, isOpen: true }) } render() { const { imags, index, isOpen } = this.state; return ( <div className="app"> <div className="img-list"> {/*直接打开*/} <button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button> { this.state.imags.map((item, index) => { return <div className="img" key={item}> <img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/> </div> }) } </div> { isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : "" } </div> ) } } export default App;

接口

  Description Type default Remarks
maxZoomNum 图片放大最大倍数 Number 4  
zIndex 组件图层深度 Number 100  
index 初始显示图片序号 Number 0  
gap 图片之间的间隙 Number 10 unit is pixel
urls 图片 URL 数组 Array   suggest the array length do not more than 10
onClose 关闭的回调处理函数 Function   需要通过该函数将组件从渲染中移除
loading 自定义图片加载组件 component WxImageViewer default Loading TODO
pointer 自定义指示器组件 component WxImageViewer default Pointer TODO

https://segmentfault.com/a/1190000010090233

猜你喜欢

转载自www.cnblogs.com/wangrui38/p/10375127.html
0条评论
添加一条新回复