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

  • 相关阅读:
    一维数组
    do while循环(熟悉)
    while循环的概念和使用
    break关键字
    continue关键字
    for循环的概念与使用
    switchcase分支结构
    if else if else分支结构
    关于scanf()读取与返回值和回车键的问题
    WCF通过IIS寄宿服务
  • 原文地址:https://www.cnblogs.com/wangrui38/p/10375127.html
Copyright © 2011-2022 走看看