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