Skip to content

Commit 67cf7df

Browse files
李钿李钿
李钿
authored and
李钿
committed
增加说明文档
1 parent b4757f7 commit 67cf7df

File tree

2 files changed

+193
-1
lines changed

2 files changed

+193
-1
lines changed

‎README-cn.md

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# [English]()
2+
3+
# 描述
4+
[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer/tree/master)是一个通用型的移动端图片浏览 React 组件。主要功能仿照微信图片浏览功能开发。支持单指左右滑动切换图片，双指拖拽放大缩小图片。
5+
6+
通过 ReactDOM 在 body 根级创建独立的 div 进行渲染，参考 [react-modal](https://github.com/reactjs/react-modal) 使用 ReactDOM.unstable_renderSubtreeIntoContainer 进行渲染
7+
8+
# 示例
9+
- [demo1](https://react-ld.github.io/react-wx-images-viewer/index.html)
10+
11+
# 基础功能
12+
- 多图左右切换浏览，不支持循环
13+
- 图片默认样式：水平方向与屏幕等宽，垂直方向居中或者居顶
14+
- 支持图片缩放浏览
15+
- 单指左右滑动切换图片，双指拖拽放到或缩小图片
16+
17+
# 扩展
18+
- 有默认加载图片动效
19+
- 可配置图层深度即 zIndex
20+
- 可配置初始显示图片序号
21+
- TODO：指示器可通过 React 组件方式自定义
22+
- TODO：加载动效可通过 React 组件方式自定义
23+
24+
# 安装
25+
```shell
26+
npm install --save react-wx-images-viewer
27+
```
28+
29+
# 使用
30+
```js
31+
import WxImageViewer from 'react-wx-images-viewer';
32+
class App extends Component {
33+
34+
state = {
35+
imags: [
36+
require('./assets/2.jpg'),
37+
require('./assets/1.jpg'),
38+
require('./assets/0.jpg'),
39+
require('./assets/3.jpg'),
40+
require('./assets/4.jpg'),
41+
],
42+
index: 0,
43+
isOpen: false
44+
};
45+
46+
onClose = () =>{
47+
this.setState({
48+
isOpen: false
49+
})
50+
}
51+
52+
openViewer (index){
53+
this.setState({
54+
index,
55+
isOpen: true
56+
})
57+
}
58+
59+
render() {
60+
const {
61+
imags,
62+
index,
63+
isOpen
64+
} = this.state;
65+
66+
return (
67+
<div className="app">
68+
<div className="img-list">
69+
{/*直接打开*/}
70+
<button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>
71+
{
72+
this.state.imags.map((item, index) => {
73+
return <div className="img" key={item}>
74+
<img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/>
75+
</div>
76+
})
77+
}
78+
</div>
79+
{
80+
isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
81+
}
82+
</div>
83+
)
84+
}
85+
}
86+
87+
export default App;
88+
```
89+
90+
# 接口
91+
| Property | Description | Type | default | Remarks |
92+
| --- | --- | --- | --- | --- |
93+
| maxZoomNum | 图片放大最大倍数 | Number | 4 | |
94+
| zIndex | 组件图层深度 | Number | 100 | |
95+
| index | 初始显示图片序号 | Number | 0 | |
96+
| gap | 图片之间的间隙 | Number | 10 | unit is pixel |
97+
| urls | 图片 URL 数组 | Array | | suggest the array length do not more than 10 |
98+
| onClose | 关闭的回调处理函数 | Function | | 需要通过该函数将组件从渲染中移除 |
99+
| loading | 自定义图片加载组件 | component | WxImageViewer default [Loading](./src/components/Loading.jsx) | TODO |
100+
| pointer | 自定义指示器组件 | component | WxImageViewer default [Pointer](./src/components/Pointer.jsx) | TODO |
101+
102+
# 参考
103+
- [react-modal](https://github.com/reactjs/react-modal)
104+
- [react-viewer-mobile](https://github.com/infeng/react-viewer-mobile/)
105+
- [react-image](https://github.com/mbrevda/react-image)

‎README.md

+88-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,92 @@
1+
# [中文文档]()
12

3+
# Description
4+
[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer/tree/master) is a React
5+
common component use for images viewer *in mobile device*. It's function look like WeChat App previewImage.
6+
Finger drag left or right to preview each image. Two finger drag zoom in or zoom out the image.
27

8+
# Install
9+
```shell
10+
npm install --save react-wx-images-viewer
11+
```
312

413
# Example
5-
- [demo1](https://react-ld.github.io/react-wx-images-viewer/index.html)
14+
- [demo1](https://react-ld.github.io/react-wx-images-viewer/index.html)
15+
16+
# How to use
17+
```js
18+
import WxImageViewer from 'react-wx-images-viewer';
19+
class App extends Component {
20+
21+
state = {
22+
imags: [
23+
require('./assets/2.jpg'),
24+
require('./assets/1.jpg'),
25+
require('./assets/0.jpg'),
26+
require('./assets/3.jpg'),
27+
require('./assets/4.jpg'),
28+
],
29+
index: 0,
30+
isOpen: false
31+
};
32+
33+
onClose = () =>{
34+
this.setState({
35+
isOpen: false
36+
})
37+
}
38+
39+
openViewer (index){
40+
this.setState({
41+
index,
42+
isOpen: true
43+
})
44+
}
45+
46+
render() {
47+
const {
48+
imags,
49+
index,
50+
isOpen
51+
} = this.state;
52+
53+
return (
54+
<div className="app">
55+
<div className="img-list">
56+
{/*直接打开*/}
57+
<button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>
58+
{
59+
this.state.imags.map((item, index) => {
60+
return <div className="img" key={item}>
61+
<img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/>
62+
</div>
63+
})
64+
}
65+
</div>
66+
{
67+
isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
68+
}
69+
</div>
70+
)
71+
}
72+
}
73+
74+
export default App;
75+
```
76+
77+
# API：
78+
| Property | Description | Type | default | Remarks |
79+
| --- | --- | --- | --- | --- |
80+
| maxZoomNum | max zoom in times | Number | 4 | |
81+
| zIndex | the depth of the layer | Number | 100 | |
82+
| index | show which image in urls array when open | Number | 0 | |
83+
| gap | the gap between images | Number | 10 | unit is pixel |
84+
| urls | images url array | Array | | suggest the array length do not more than 10 |
85+
| onClose | handle close function | Function | | must remove WxViewer from current render and other sepcial logic |
86+
| loading | DIY loading style | component | WxImageViewer default [Loading](./src/components/Loading.jsx) | TODO |
87+
| pointer | DIY pointer | component | WxImageViewer default [Pointer](./src/components/Pointer.jsx) | TODO |
88+
89+
# Reference
90+
- [react-modal](https://github.com/reactjs/react-modal)
91+
- [react-viewer-mobile](https://github.com/infeng/react-viewer-mobile/)
92+
- [react-image](https://github.com/mbrevda/react-image)

0 commit comments

Comments
 (0)