Kaynağa Gözat

细节优化

liumingyi_1 5 yıl önce
ebeveyn
işleme
320b34f255
3 değiştirilmiş dosya ile 14 ekleme ve 7 silme
  1. 11 1
      src/PhotoSlider.tsx
  2. 2 5
      src/PhotoView.tsx
  3. 1 1
      src/variables.ts

+ 11 - 1
src/PhotoSlider.tsx

@@ -153,6 +153,7 @@ export default class PhotoSlider extends React.Component<
 
   handleReachHorizontalMove = clientX => {
     const { innerWidth } = window;
+    const { images } = this.props;
     this.setState(({ lastClientX, translateX, photoIndex }) => {
       if (lastClientX === undefined) {
         return {
@@ -161,7 +162,16 @@ export default class PhotoSlider extends React.Component<
           translateX,
         };
       }
-      const offsetClientX = clientX - lastClientX;
+      const originOffsetClientX = clientX - lastClientX;
+      let offsetClientX = originOffsetClientX;
+
+      // 第一张和最后一张超出距离减半
+      if (
+        (photoIndex === 0 && originOffsetClientX > 0) ||
+        (photoIndex === images.length - 1 && originOffsetClientX < 0)
+      ) {
+        offsetClientX = originOffsetClientX / 2;
+      }
       return {
         touched: true,
         lastClientX: lastClientX,

+ 2 - 5
src/PhotoView.tsx

@@ -19,7 +19,6 @@ import {
   ReachFunction,
   PhotoTapFunction,
   ReachTypeEnum,
-  CloseEdgeEnum,
   TouchStartEnum,
 } from './types';
 import './PhotoView.less';
@@ -177,7 +176,7 @@ export default class PhotoView extends React.Component<
         const {
           onReachMove,
         } = this.props;
-        const planX = newClientX - clientX + lastX;
+        currentX = newClientX - clientX + lastX;
         const planY = newClientY - clientY + lastY;
         const touchYOffset = this.initialTouchState === TouchStartEnum.YPush
           ? minStartTouchOffset
@@ -185,14 +184,12 @@ export default class PhotoView extends React.Component<
         // 边缘超出状态
         const { horizontalCloseEdge, verticalCloseEdge } = getCloseEdgeResult({
           initialTouchState: this.initialTouchState,
-          planX,
+          planX: currentX,
           planY,
           scale,
           width,
           height,
         });
-        // X 方向响应距离减小
-        currentX = (planX - lastX) / (horizontalCloseEdge !== CloseEdgeEnum.Normal ? 2 : 1) + lastX;
         // Y 方向在初始响应状态下需要补一个距离
         currentY = planY +
           (this.initialTouchState === TouchStartEnum.Normal ? 0 : touchYOffset);

+ 1 - 1
src/variables.ts

@@ -16,7 +16,7 @@ export const horizontalOffset: number = 20;
 /**
  * 最小初始响应距离
  */
-export const minStartTouchOffset: number = 20;
+export const minStartTouchOffset: number = 10;
 
 /**
  * 默认背景透明度