zoukankan      html  css  js  c++  java
  • 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;

    接口

     DescriptionTypedefaultRemarks
    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

  • 相关阅读:
    第一篇博文,纪念下
    HDU 1026 Ignatius and the Princess I (bfs+存储路径)
    acer Empowering Technology下载(转)
    设定sql server定期自动备份数据库
    web.config加密解密
    WCF安全性资料
    SharePoint中CAML日期格式
    Map Reduce the Free Lunch is not over?(转)
    asp.net与javascript
    获取当前build的版本信息
  • 原文地址:https://www.cnblogs.com/wangrui38/p/10375127.html
Copyright © 2011-2022 走看看