Skip to content

Commit 41f6e12

Browse files
李钿李钿
李钿
authored and
李钿
committed
整理代码
1 parent ed65a2e commit 41f6e12

File tree

4 files changed

+96
-71
lines changed

4 files changed

+96
-71
lines changed

‎src/components/ImageContainer.jsx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,12 @@ function setScope(value, min, max){
3737

3838
class ImageContainer extends PureComponent {
3939
static propTypes = {
40-
maxZoomNum: PropTypes.number,
40+
maxZoomNum: PropTypes.number.isRequired,
4141
handleStart: PropTypes.func,
4242
handleMove: PropTypes.func,
4343
handleEnd: PropTypes.func
4444
}
4545

46-
static defaultProps = {
47-
maxZoomNum: 4,
48-
}
49-
5046
static contextTypes = {
5147
onClose: PropTypes.func
5248
};
@@ -60,7 +56,30 @@ class ImageContainer extends PureComponent {
6056
isLoaded: false
6157
}
6258

63-
componentDidMount() {
59+
constructor(){
60+
super();
61+
this.actualHeight = 0; //图片实际高度
62+
this.actualWith = 0; //图片实际宽度
63+
64+
this.originHeight = 0; //图片默认展示模式下高度
65+
this.originWidth = 0; //图片默认展示模式下宽度
66+
67+
this.startHeight = 0; //开始触摸操作时的高度
68+
this.startWidth = 0; //开始触摸操作时的宽度
69+
this.startLeft = 0; //开始触摸操作时的 left 值
70+
this.startTop = 0; //开始触摸操作时的 top 值
71+
72+
this.onTouchStartTime = 0; //单指触摸开始时间
73+
this.isTap = false; //是否为 Tap 事件
74+
75+
this.isTwoFingerMode = false; //是否为双指模式
76+
this.oldPointLeft = 0;//计算手指中间点在图片上的位置（坐标值）
77+
this.oldPointTop = 0;//计算手指中间点在图片上的位置（坐标值）
78+
this._touchZoomDistanceStart = 0; //用于记录双指距离
79+
80+
}
81+
82+
componentWillMount() {
6483
this.loadImg(this.props.src);
6584
}
6685

@@ -144,12 +163,12 @@ class ImageContainer extends PureComponent {
144163
}
145164

146165
if(left < this.originWidth - this.state.width){
147-
this.callHandleStart();
166+
// this.callHandleStart();
148167
if(this.props.handleMove){
149168
this.props.handleMove(left + this.state.width - this.originWidth);
150169
}
151170
} else if(left > 0){
152-
this.callHandleStart();
171+
// this.callHandleStart();
153172
if(this.props.handleMove){
154173
this.props.handleMove(left);
155174
}
@@ -227,15 +246,14 @@ class ImageContainer extends PureComponent {
227246
top
228247
})
229248
if(event.touches.length === 1){
230-
event.preventDefault();
231-
event.stopPropagation();
232249
let targetEvent = event.touches[0];
233250
this.startX = targetEvent.clientX;
234251
this.startY = targetEvent.clientY;
235252

236253
this.startLeft = left;
237254
this.startTop = top;
238255
console.info("this.startX = %s, this.startY = %s, this.startLeft = %s, this.startTop = %s", this.startX, this.startY, this.startLeft, this.startTop);
256+
this.callHandleStart();
239257
}
240258
} else{//单指结束（ontouchend）
241259
this.callHandleEnd();

‎src/components/ListContainer.jsx‎

Lines changed: 23 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,37 @@ const DEDAULT_TIME_DIFF = 200;
99

1010
class ListContainer extends PureComponent {
1111
static propTypes = {
12-
gap: PropTypes.number,
13-
}
14-
15-
static defaultProps = {
16-
gap: 10,
12+
maxZoomNum: PropTypes.number.isRequired,
13+
changeIndex: PropTypes.func.isRequired,
14+
gap: PropTypes.number.isRequired,
1715
}
1816

1917
state = {
20-
index: 0,
2118
left: 0,
22-
isNeedSpring: false
19+
}
20+
21+
constructor(){
22+
super();
23+
this.isNeedSpring = false;
2324
}
2425

2526
componentWillMount() {
2627
const {
2728
screenWidth,
2829
urls,
2930
index,
31+
changeIndex,
3032
gap
3133
} = this.props;
3234

3335
this.length = urls.length;
3436
this.perDistance = screenWidth + gap;
3537
this.maxLeft = this.perDistance * (this.length - 1);
38+
this.isNeedSpring = false;
3639

3740
this.setState({
38-
index,
3941
left: - this.perDistance * index,
40-
isNeedSpring: false
41-
})
42+
});
4243
}
4344
/**
4445
* 拖拽的缓动公式 - easeOutSine
@@ -58,24 +59,22 @@ class ListContainer extends PureComponent {
5859
}
5960

6061
handleStart = () =>{
61-
console.info("ListContainer handleStart")
62+
// console.info("ListContainer handleStart")
6263
this.startLeft = this.state.left;
6364
this.startTime = (new Date()).getTime();
64-
this.setState({
65-
isNeedSpring: false
66-
})
65+
this.isNeedSpring = false;
6766
}
6867

6968
handleMove = (diffX) =>{
70-
console.info("ListContainer handleStart diffX = %s",diffX);
69+
// console.info("ListContainer handleStart diffX = %s",diffX);
7170
if(this.state.left >= 0 && diffX > 0){
7271
diffX = this.easing(diffX);
7372
} else if(this.state.left <= - this.maxLeft && diffX < 0){
7473
diffX = -this.easing(-diffX);
7574
}
75+
7676
this.setState({
7777
left: this.startLeft + diffX,
78-
isNeedSpring: false
7978
})
8079
}
8180

@@ -85,9 +84,9 @@ class ListContainer extends PureComponent {
8584
//快速拖动情况下切换图片
8685
if(diffTime < DEDAULT_TIME_DIFF){
8786
if(this.state.left < this.startLeft){
88-
index = this.state.index + 1;
87+
index = this.props.index + 1;
8988
} else{
90-
index = this.state.index - 1;
89+
index = this.props.index - 1;
9190
}
9291
} else{
9392
index = Math.abs(Math.round(this.state.left / this.perDistance));
@@ -98,28 +97,28 @@ class ListContainer extends PureComponent {
9897
else if(index > this.length - 1){ index = this.length - 1}
9998

10099
this.setState({
101-
index,
102100
left: - this.perDistance * index,
103-
isNeedSpring: true
104101
})
102+
this.isNeedSpring = true;
103+
this.props.changeIndex(index);
105104
}
106105

107106
render() {
108107
const {
108+
maxZoomNum,
109109
screenWidth,
110110
screenHeight,
111-
urls,
112111
index,
112+
urls,
113113
gap
114114
} = this.props;
115115

116116
const {
117117
left,
118-
isNeedSpring
119118
} = this.state
120119

121120
return (
122-
<Motion style={{x: isNeedSpring ? spring(left) : left}}>
121+
<Motion style={{x: this.isNeedSpring ? spring( left) : left}}>
123122
{
124123
({x}) => {
125124
let defaultStyle = {
@@ -136,6 +135,7 @@ class ListContainer extends PureComponent {
136135
urls.map((item,i) => <ImageContainer
137136
key={i}
138137
src={item}
138+
maxZoomNum={maxZoomNum}
139139
handleStart={this.handleStart}
140140
handleMove={this.handleMove}
141141
handleEnd={this.handleEnd}
@@ -148,19 +148,6 @@ class ListContainer extends PureComponent {
148148
}
149149
}
150150
</Motion>
151-
/*<HandleWrapContainer
152-
style={defaultStyle}
153-
diff={screenWidth + gap}
154-
maxW={(screenWidth + gap)*(urls.length-1)}>
155-
{
156-
urls.map((item,i) => <ImageContainer
157-
key={i}
158-
src={item}
159-
left={this.perDistance * i}
160-
screenWidth={screenWidth}
161-
screenHeight={screenHeight}/>)
162-
}
163-
</HandleWrapContainer>*/
164151
);
165152
}
166153
}

‎src/components/WrapViewer.jsx‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33

44
import ListContainer from './ListContainer';
5+
import Pointer from './Pointer'
56

67
let defaultStyle = {}
78

@@ -11,33 +12,61 @@ const screenHeight = document && document.documentElement.clientHeight;
1112
class WrapViewer extends Component {
1213

1314
static propTypes = {
14-
zIndex: PropTypes.number,
15-
urls: PropTypes.array.isRequired, // 需要预览的图片http链接列表
16-
index: PropTypes.number, // 当前显示图片的http链接
15+
maxZoomNum: PropTypes.number.isRequired, //最大放大倍数
16+
zIndex: PropTypes.number.isRequired, //组件图层深度
17+
index: PropTypes.number.isRequired, // 当前显示图片的http链接
18+
urls: PropTypes.array.isRequired, // 需要预览的图片http链接列表
19+
gap: PropTypes.number.isRequired, //间隙
1720
}
1821

19-
static defaultProps = {
20-
zIndex: 100,
22+
state = {
23+
index: 0
24+
}
25+
26+
componentWillMount() {
27+
const {
28+
index,
29+
} = this.props;
30+
31+
this.setState({
32+
index
33+
})
34+
}
35+
36+
changeIndex = (index)=>{
37+
console.info("changeIndex index = ",index);
38+
this.setState({
39+
index
40+
})
2141
}
2242

2343
render() {
2444
const {
45+
maxZoomNum,
2546
zIndex,
2647
urls,
27-
index,
28-
onClose
48+
onClose,
49+
gap
2950
} = this.props
3051

52+
const {
53+
index
54+
} = this.state
55+
3156
defaultStyle.zIndex = zIndex;
3257

3358
return (
3459
<div className="wx-image-viewer" style={defaultStyle}>{/* root */}
3560
<div className="viewer-cover"></div>
3661
<ListContainer
62+
maxZoomNum={maxZoomNum}
3763
screenWidth={screenWidth}
3864
screenHeight={screenHeight}
65+
changeIndex={this.changeIndex}
3966
urls={urls}
67+
gap={gap}
4068
index={index}/>
69+
<Pointer length={urls.length} index={index}/>
4170
</div>
4271
);
4372
}

‎src/components/WxImageViewer.jsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,26 @@ import './WxImageViewer.less';
88

99
const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
1010

11-
// let WxImageViewerRootNode;
12-
13-
/**
14-
* DOM node singleton
15-
*/
16-
// function getRootNode(){
17-
// if(!WxImageViewerRootNode){
18-
// WxImageViewerRootNode = document.createElement('div');
19-
// document.body.appendChild(WxImageViewer);
20-
// }
21-
22-
// return WxImageViewerRootNode;
23-
// }
24-
2511
class WxImageViewer extends Component {
2612

2713
static propTypes = {
28-
zIndex: PropTypes.number,
29-
urls: PropTypes.array.isRequired, // 需要预览的图片http链接列表
30-
index: PropTypes.number, // 当前显示图片的http链接
31-
onClose: PropTypes.func.isRequired
14+
maxZoomNum: PropTypes.number.isRequired, //最大放大倍数
15+
zIndex: PropTypes.number.isRequired, //组件图层深度
16+
index: PropTypes.number.isRequired, // 当前显示图片的http链接
17+
urls: PropTypes.array.isRequired, // 需要预览的图片http链接列表
18+
gap: PropTypes.number.isRequired, //间隙
19+
onClose: PropTypes.func.isRequired, //关闭组件回调
3220
}
21+
3322
static childContextTypes = {
3423
onClose: PropTypes.func
3524
};
3625

3726
static defaultProps = {
27+
maxZoomNum: 4,
3828
zIndex: 100,
3929
index: 0,
30+
gap: 10,
4031
}
4132

4233
componentDidMount() {

0 commit comments

Comments
 (0)