安装
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