Skip to content

Commit aa33fbd

Browse files
李钿李钿
李钿
authored and
李钿
committed
setState 的调用方式改为传递函数处理
1 parent 6b31b37 commit aa33fbd

File tree

1 file changed

+76
-60
lines changed

1 file changed

+76
-60
lines changed

‎src/components/ImageContainer.jsx‎

Lines changed: 76 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ function setScope(value, min, max){
1515
}
1616

1717
/**
18+
* 图片默认展示模式：宽度等于屏幕宽度，高度等比缩放；水平居中，垂直居中或者居顶（当高度大于屏幕高度时）
1819
* 图片实际尺寸： actualWith, actualHeight
1920
* 图片初始尺寸： originWidth, originHeight
2021
* 坐标位置：left, top
@@ -89,27 +90,25 @@ class ImageContainer extends PureComponent {
8990

9091
handleTouchStart = (event) =>{
9192
console.info("handleTouchStart")
93+
event.preventDefault();
9294

9395
switch (event.touches.length) {
9496
case 1:
95-
event.preventDefault();
9697
let targetEvent = event.touches[0];
9798
this.startX = targetEvent.clientX;
9899
this.startY = targetEvent.clientY;
99100

100101
this.startLeft = this.state.left;
101102
this.startTop = this.state.top;
102103

103-
if(this.state.width === this.originWidth){
104-
this.callHandleStart()
105-
}
104+
// if(this.state.width === this.originWidth){
105+
// this.callHandleStart()
106+
// }
106107
this.onTouchStartTime = (new Date()).getTime();
107108
this.isTap = true;
108109
break;
109110

110111
case 2: //两个手指
111-
event.preventDefault();
112-
event.stopPropagation();
113112

114113
//设置手双指模式
115114
this.isTwoFingerMode = true;
@@ -138,6 +137,8 @@ class ImageContainer extends PureComponent {
138137
}
139138

140139
handleTouchMove = (event) =>{
140+
event.preventDefault();
141+
141142
switch (event.touches.length) {
142143
case 1:
143144
let targetEvent = event.touches[0],
@@ -152,49 +153,48 @@ class ImageContainer extends PureComponent {
152153
//图片宽度等于初始宽度，直接调用 handleMove 函数
153154
if(this.state.width === this.originWidth){
154155
if(this.props.handleMove){
155-
this.props.handleMove(diffX);
156+
// this.callHandleStart();
157+
// this.props.handleMove(diffX);
158+
this.callHandleMove(diffX);
156159
}
157160
} else{
158-
let top = (this.props.screenHeight - this.state.height)/2,
159-
left = this.startLeft + diffX;
160-
161-
if(this.state.height > this.props.screenHeight){
162-
top = setScope(this.startTop + diffY, ( this.props.screenHeight - this.state.height ), 0 );
163-
}
161+
this.setState((prevState, props) =>{
162+
let top = (props.screenHeight - prevState.height)/2,
163+
left = this.startLeft + diffX;
164164

165-
if(left < this.originWidth - this.state.width){
166-
// this.callHandleStart();
167-
if(this.props.handleMove){
168-
this.props.handleMove(left + this.state.width - this.originWidth);
165+
if(prevState.height > props.screenHeight){
166+
top = setScope(this.startTop + diffY, ( props.screenHeight - prevState.height ), 0 );
169167
}
170-
} else if(left > 0){
171-
// this.callHandleStart();
172-
if(this.props.handleMove){
173-
this.props.handleMove(left);
168+
console.info("left = %s, this.originWidth - prevState.width = %s",left,this.originWidth - prevState.width)
169+
//存在 handleMove 函数
170+
if(props.handleMove){
171+
if(left < this.originWidth - prevState.width){
172+
// this.callHandleStart();
173+
// props.handleMove(left + prevState.width - this.originWidth);
174+
this.callHandleMove(left + prevState.width - this.originWidth);
175+
} else if(left > 0){
176+
// this.callHandleStart();
177+
// props.handleMove(left);
178+
this.callHandleMove(left);
179+
}
174180
}
175-
}
176181

177-
left = setScope(left, this.originWidth - this.state.width, 0);
182+
left = setScope(left, this.originWidth - prevState.width, 0);
178183

179-
console.info("this.startX = %s, this.startY = %s, this.startLeft = %s, this.startTop = %s, diffX = %s, diffY = %s", this.startX, this.startY, this.startLeft, this.startTop, diffX, diffY);
180-
this.setState({
181-
left,
182-
top
184+
console.info("this.startX = %s, this.startY = %s, this.startLeft = %s, this.startTop = %s, diffX = %s, diffY = %s", this.startX, this.startY, this.startLeft, this.startTop, diffX, diffY);
185+
return {
186+
left,
187+
top
188+
}
183189
})
184-
185190
}
186191

187-
event.preventDefault();
188192
break;
189193

190194
case 2: //两个手指
191-
event.preventDefault();
192-
event.stopPropagation();
193-
194195
var dx = event.touches[ 0 ].clientX - event.touches[ 1 ].clientX;
195196
var dy = event.touches[ 0 ].clientY - event.touches[ 1 ].clientY;
196197
this._touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
197-
console.info("this._touchZoomDistanceEnd = ", this._touchZoomDistanceEnd);
198198

199199
let zoom = Math.sqrt(this._touchZoomDistanceEnd / this._touchZoomDistanceStart);
200200

@@ -221,57 +221,73 @@ class ImageContainer extends PureComponent {
221221

222222
handleTouchEnd = (event) =>{
223223
console.info("handleTouchEnd", event.touches.length);
224+
event.preventDefault();
225+
224226
if(this.isTwoFingerMode){//双指操作结束
227+
let touchLen = event.touches.length;
225228
this.isTwoFingerMode = false;
226-
let left, top, width, height;
227229

228-
width = setScope(this.state.width, this.originWidth, this.props.maxZoomNum * this.originWidth);
229-
height = setScope(this.state.height, this.originHeight, this.props.maxZoomNum * this.originHeight);
230+
if(touchLen === 1){
231+
let targetEvent = event.touches[0];
232+
this.startX = targetEvent.clientX;
233+
this.startY = targetEvent.clientY;
234+
}
230235

231-
let zoom = width / this.startWidth;
236+
this.setState((prevState, props) => {
237+
let left, top, width, height, zoom;
232238

233-
left = setScope(this.startLeft + (1 - zoom) * this.oldPointLeft, this.originWidth - width, 0);
239+
width = setScope(prevState.width, this.originWidth, props.maxZoomNum * this.originWidth);
240+
height = setScope(prevState.height, this.originHeight, props.maxZoomNum * this.originHeight);
234241

235-
if(height > this.props.screenHeight){
236-
top = setScope(this.startTop + (1 - zoom) * this.oldPointTop, this.props.screenHeight - height, 0);
237-
} else{
238-
top = (this.props.screenHeight - height) / 2;
239-
}
242+
zoom = width / this.startWidth;
243+
left = setScope(this.startLeft + (1 - zoom) * this.oldPointLeft, this.originWidth - width, 0);
244+
245+
if(height > props.screenHeight){
246+
top = setScope(this.startTop + (1 - zoom) * this.oldPointTop, props.screenHeight - height, 0);
247+
} else{
248+
top = (props.screenHeight - height) / 2;
249+
}
240250

241-
console.info("zoom = %s, left = %s, top = %s, width=%s, height= %s", zoom, left, top,width,height);
242-
this.setState({
243-
width,
244-
height,
245-
left,
246-
top
251+
if(touchLen === 1){
252+
this.startLeft = left;
253+
this.startTop = top;
254+
console.info("this.startX = %s, this.startY = %s, this.startLeft = %s, this.startTop = %s", this.startX, this.startY, this.startLeft, this.startTop);
255+
}
256+
257+
console.info("zoom = %s, left = %s, top = %s, width=%s, height= %s", zoom, left, top,width,height);
258+
return {
259+
width,
260+
height,
261+
left,
262+
top
263+
}
247264
})
248-
if(event.touches.length === 1){
249-
let targetEvent = event.touches[0];
250-
this.startX = targetEvent.clientX;
251-
this.startY = targetEvent.clientY;
252265

253-
this.startLeft = left;
254-
this.startTop = top;
255-
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();
257-
}
258266
} else{//单指结束（ontouchend）
259267
this.callHandleEnd();
260268
let diffTime = (new Date()).getTime() - this.onTouchStartTime
261269
if(diffTime < 100 && this.isTap){
262270
this.context.onClose();
263271
}
264272
}
265-
event.preventDefault();
266273
}
267274

268-
callHandleStart = () =>{
275+
// callHandleStart = () =>{
276+
// if(!this.isCalledHandleStart){
277+
// this.isCalledHandleStart = true;
278+
// if(this.props.handleStart){
279+
// this.props.handleStart();
280+
// }
281+
// }
282+
// }
283+
callHandleMove = (diffX) =>{
269284
if(!this.isCalledHandleStart){
270285
this.isCalledHandleStart = true;
271286
if(this.props.handleStart){
272287
this.props.handleStart();
273288
}
274289
}
290+
this.props.handleMove(diffX);
275291
}
276292

277293
callHandleEnd = () =>{

0 commit comments

Comments
 (0)