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