提交 c19c895b authored 作者: 钟是志's avatar 钟是志

增加图片预览的 readme

上级 78b8abe8
```javascript
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;
```
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论