react图片全屏查看轮播组件
图片查看组件，用react构建，在线demo：vv13.cn/picture-view
如何安装npm install --save picture-view
使用示例import React, {Component} from 'react';
import './App.css';
import PictureView from 'picture-view';
import p1 from './imgs/1.jpg';
import p2 from './imgs/2.jpg';
class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
picView: false,
picIndex: 0,
pictures: [p1, p2],
};
}
toggleView(status) {
this.setState({
picView: status,
});
}
toggleIndex(index) {
this.setState({
picView: true,
picIndex: index,
});
}
render() {
return (
<div className="App">
{
this.state.pictures.map((pic, index) => (
<img alt={`img-${index}`} src={pic} width="400" height="400" key={`img-${index}`} onClick={() => this.toggleIndex(index)}/>
))
}
<PictureView
picView={this.state.picView}
picIndex={this.state.picIndex}
pictures={this.state.pictures}
toggleView={() => this.toggleView()}
isSwipe
hasDot
hasArrow
/>
</div>
);
}
}
export default App;
配置项
| 参数名 | 描述 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| picView | 是否全屏显示图片 | bool | 是 | |
| picIndex | 显示的图片索引 | number | 是 | |
| toggleView | 改变picView的回调函数 | func | 是 | |
| pictures | 图片地址数组 | array | 是 | |
| isSwipe | 是否可拖动图片 | bool | false | 否 |
| hasArrow | 是否显示箭头 | bool | false | 否 |
| hasDot | 是否显示点 | bool | false | 否 |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
