Nanoprogrammed Penultimate Musicianship
Miss any of our Open RFC calls?Watch the recordings here! »

homestyler-images-viewer

1.0.1 • Public • Published

中文文档

Description

react-wx-images-viewer is a React common component use for images viewer in mobile device. It's function look like WeChat App previewImage. Finger drag left or right to preview each image. Two finger drag zoom in or zoom out the image.

Install

npm install --save react-wx-images-viewer

dependence

version 0.0.1 -> React ^15.5.4

version ^1.0.0 -> React ^16.0.0

Example

How to use

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;

API:

Property Description Type default Remarks
maxZoomNum max zoom in times Number 4
zIndex the depth of the layer Number 100
index show which image in urls array when open Number 0
gap the gap between images Number 10 unit is pixel
urls images url array Array suggest the array length do not more than 10
onClose handle close function Function must remove WxViewer from current render and other sepcial logic
loading DIY loading style component WxImageViewer default Loading TODO
pointer DIY pointer component WxImageViewer default Pointer TODO

Reference

Install

npm i homestyler-images-viewer

DownloadsWeekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

94.1 kB

Total Files

25

Last publish

Collaborators

  • avatar