bug:fix

src/PhotoSlider.tsx

@@ -36,10 +36,10 @@ type PhotoSliderState = {
   lastClientY: number | undefined;
   // 背景透明度
   backdropOpacity: number;
-  // 缩放度
-  photoScale: number;
   // 覆盖物可见度
   overlayVisible: boolean;
+  // 可下拉关闭
+  canPullClose: boolean;
 };
 
 export default class PhotoSlider extends React.Component<
@@ -79,8 +79,8 @@ export default class PhotoSlider extends React.Component<
       lastClientX: undefined,
       lastClientY: undefined,
       backdropOpacity: defaultOpacity,
-      photoScale: 1,
       overlayVisible: true,
+      canPullClose: true,
     };
     this.handleResize = debounce(this.handleResize, 32);
   }
@@ -127,25 +127,26 @@ export default class PhotoSlider extends React.Component<
     });
   };
 
-  handleReachVerticalMove = (_, clientY) => {
+  handleReachVerticalMove = (_, clientY, scale) => {
     this.setState(({ lastClientY, backdropOpacity }) => {
       if (lastClientY === undefined) {
         return {
           touched: true,
           lastClientY: clientY,
           backdropOpacity,
-          photoScale: 1,
+          canPullClose: true,
         };
       }
       const offsetClientY = Math.abs(clientY - lastClientY);
+      const opacity = Math.max(
+        Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 2),
+        0,
+      );
       return {
         touched: true,
         lastClientY,
-        backdropOpacity: Math.max(
-          Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 2),
-          0,
-        ),
-        photoScale: Math.max(Math.min(1, 1 - offsetClientY / 100 / 10), 0.6),
+        backdropOpacity: scale === 1 ? opacity : defaultOpacity,
+        canPullClose: scale === 1,
       };
     });
   };
@@ -191,6 +192,7 @@ export default class PhotoSlider extends React.Component<
       lastClientY = clientY,
       photoIndex,
       overlayVisible,
+      canPullClose,
     } = this.state;
 
     const offsetClientX = clientX - lastClientX;
@@ -202,7 +204,7 @@ export default class PhotoSlider extends React.Component<
     let currentPhotoIndex = photoIndex;
     let isChangeVisible = false;
 
-    if (Math.abs(offsetClientY) > innerHeight * 0.14) {
+    if (Math.abs(offsetClientY) > innerHeight * 0.14 && canPullClose) {
       isChangeVisible = true;
       onClose();
       // 下一张
@@ -230,7 +232,6 @@ export default class PhotoSlider extends React.Component<
       lastClientX: undefined,
       lastClientY: undefined,
       backdropOpacity: defaultOpacity,
-      photoScale: 1,
       overlayVisible: isChangeVisible ? true : overlayVisible,
     });
   };
@@ -255,7 +256,6 @@ export default class PhotoSlider extends React.Component<
       touched,
       photoIndex,
       backdropOpacity,
-      photoScale,
       overlayVisible,
     } = this.state;
     const imageLength = images.length;
@@ -320,7 +320,6 @@ export default class PhotoSlider extends React.Component<
                   onReachUp={this.handleReachUp}
                   onPhotoTap={this.handlePhotoTap}
                   onMaskTap={this.handlePhotoMaskTap}
-                  photoScale={photoIndex === realIndex ? photoScale : 1}
                   wrapClassName={viewClassName}
                   className={imageClassName}
                   style={{

src/PhotoView.tsx

@@ -25,8 +25,6 @@ export interface IPhotoViewProps {
   className?: string;
   // style
   style?: object;
-  // 缩放，用于下拉关闭变小的效果
-  photoScale?: number;
   // 自定义 loading
   loadingElement?: JSX.Element;
   // 加载失败 Element
@@ -168,6 +166,7 @@ export default class PhotoView extends React.Component<
           verticalCloseEdge,
           clientX: newClientX,
           clientY: newClientY,
+          scale,
           reachState,
         });
       }
@@ -394,6 +393,7 @@ export default class PhotoView extends React.Component<
     clientY,
     horizontalCloseEdge,
     verticalCloseEdge,
+    scale,
     reachState,
   }: {
     x: number,
@@ -402,6 +402,7 @@ export default class PhotoView extends React.Component<
     clientY: number,
     horizontalCloseEdge: CloseEdgeEnum,
     verticalCloseEdge: CloseEdgeEnum,
+    scale: number,
     reachState: ReachTypeEnum,
   }): ReachTypeEnum => {
     const {
@@ -436,7 +437,7 @@ export default class PhotoView extends React.Component<
       && reachState === ReachTypeEnum.Normal
       || reachState === ReachTypeEnum.YReach)
     ) {
-      onReachTopMove(clientX, clientY);
+      onReachTopMove(clientX, clientY, scale);
       return ReachTypeEnum.YReach;
     } else if (
       onReachBottomMove
@@ -445,7 +446,7 @@ export default class PhotoView extends React.Component<
       && reachState === ReachTypeEnum.Normal
       || reachState === ReachTypeEnum.YReach)
     ) {
-      onReachBottomMove(clientX, clientY);
+      onReachBottomMove(clientX, clientY, scale);
       return ReachTypeEnum.YReach;
     }
     return ReachTypeEnum.Normal;
@@ -457,13 +458,12 @@ export default class PhotoView extends React.Component<
       wrapClassName,
       className,
       style,
-      photoScale = 1,
       loadingElement,
       brokenElement,
     } = this.props;
     const { x, y, scale, touched } = this.state;
 
-    const transform = `translate3d(${x}px, ${y}px, 0) scale(${scale * photoScale})`;
+    const transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
 
     return (
       <div className={classNames('PhotoView__PhotoWrap', wrapClassName)} style={style}>

src/types.ts

@@ -52,7 +52,7 @@ export interface IPhotoProviderBase {
   brokenElement?: JSX.Element;
 }
 
-export type ReachFunction = (clientX: number, clientY: number) => void;
+export type ReachFunction = (clientX: number, clientY: number, scale?: number) => void;
 
 export type PhotoTapFunction = (clientX: number, clientY: number) => void;
 

src/utils/slideToPosition.ts

@@ -1,7 +1,4 @@
-import {
-  maxTouchTime,
-  slideAcceleration,
-} from '../variables';
+import { maxTouchTime, slideAcceleration } from '../variables';
 import { CloseEdgeEnum } from '../types';
 import { getClosedHorizontal, getClosedVertical } from './getCloseEdge';
 
@@ -52,28 +49,32 @@ const slideToPosition = ({
   const outOffsetX = (width * scale - innerWidth) / 2;
   const outOffsetY = (height * scale - innerHeight) / 2;
 
-  const horizontalType = getClosedHorizontal(planX, scale, width);
-  const verticalType = getClosedVertical(planY, scale, height);
+  const horizontalCloseEdge = getClosedHorizontal(planX, scale, width);
+  const verticalCloseEdge = getClosedVertical(planY, scale, height);
 
   // x
-  if (horizontalType === CloseEdgeEnum.Small) {
+  if (horizontalCloseEdge === CloseEdgeEnum.Small) {
     currentX = 0;
-  } else if (horizontalType === CloseEdgeEnum.Before) {
+  } else if (horizontalCloseEdge === CloseEdgeEnum.Before) {
     currentX = outOffsetX;
-  } else if (horizontalType === CloseEdgeEnum.After) {
+  } else if (horizontalCloseEdge === CloseEdgeEnum.After) {
     currentX = -outOffsetX;
   }
   // y
-  if (verticalType === CloseEdgeEnum.Small) {
+  if (verticalCloseEdge === CloseEdgeEnum.Small) {
     currentY = 0;
-  } else if (verticalType === CloseEdgeEnum.Before) {
+  } else if (verticalCloseEdge === CloseEdgeEnum.Before) {
     currentY = outOffsetY;
-  } else if (verticalType === CloseEdgeEnum.After) {
+  } else if (verticalCloseEdge === CloseEdgeEnum.After) {
     currentY = -outOffsetY;
   }
 
   // 时间过长
-  if (moveTime >= maxTouchTime && (currentX !== 0 || currentY !== 0)) {
+  if (
+    moveTime >= maxTouchTime &&
+    (horizontalCloseEdge === CloseEdgeEnum.Normal &&
+      verticalCloseEdge === CloseEdgeEnum.Normal)
+  ) {
     return {
       x,
       y,