fix(pull-down-refresh): 修正下拉刷新 (#1080)

src/pull-down-refresh/pull-down-refresh.vue

@@ -66,6 +66,10 @@ export default defineComponent({
     const { height: maxBarHeight } = useElementSize(maxBar);
     const actualLoadingBarHeight = ref(0);
 
+    // 默认 0 左右移动 1 上下移动 -1
+    let touchDir: -1 | 0 | 1;
+    const touchThreshold = 5;
+
     watch(
       [loading, loadingBarHeight],
       ([val], [prevVal]) => {
@@ -113,22 +117,38 @@ export default defineComponent({
       timer = null;
       distance.value = 0;
       touch.start(e);
+      touchDir = 0;
     };
 
     const onTouchMove = (e: TouchEvent) => {
       if (!isReachTop(e) || loading.value) return;
+      touch.move(e);
+
+      const { diffY, diffX } = touch;
+      const absX = Math.abs(diffX.value);
+      const absY = Math.abs(diffY.value);
+
+      if (!touchDir && absX < touchThreshold && absY < touchThreshold) {
+        return;
+      }
+      if (!touchDir && absX < absY) {
+        touchDir = -1;
+      } else if (!touchDir && absX >= absY) {
+        touchDir = 1;
+      }
 
-      const { deltaY } = touch;
-      actualLoadingBarHeight.value = deltaY.value;
-      const nextDistance = easeDistance(deltaY.value, loadingBarHeight.value);
+      // 左右移动时，不进行后续操作
+      if (touchDir === 1) return;
+
+      actualLoadingBarHeight.value = diffY.value;
+      const nextDistance = easeDistance(diffY.value, loadingBarHeight.value);
       // 下拉时，防止下拉整个页面
-      if (deltaY.value > 0) {
+      if (diffY.value > 0) {
         preventDefault(e, false);
       }
       if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {
         distance.value = nextDistance;
       }
-      touch.move(e);
     };
 
     const onTouchEnd = (e: TouchEvent) => {

src/pull-down-refresh/useTouch.ts

@@ -6,23 +6,32 @@ const isElement = (node: Element) => {
 };
 
 export function useTouch() {
+  const startX = ref(0);
   const startY = ref(0);
-  const deltaY = ref(0);
+  const diffX = ref(0);
+  const diffY = ref(0);
   const start = (event: TouchEvent) => {
-    startY.value = event.touches[0].clientY;
-    deltaY.value = 0;
+    const { clientX, clientY } = event.touches[0];
+    startX.value = clientX;
+    startY.value = clientY;
+    diffY.value = 0;
+    diffX.value = 0;
   };
   const move = (event: TouchEvent) => {
-    const touch = event.touches[0];
-    deltaY.value = touch.clientY - startY.value;
+    const { clientX, clientY } = event.touches[0];
+    diffY.value = clientY - startY.value;
+    diffX.value = clientX - startX.value;
   };
   return {
+    startX,
     startY,
-    deltaY,
+    diffX,
+    diffY,
     start,
     move,
   };
 }
+
 // 缓动函数
 export const easeDistance = (distance: number, pullDistance: number) => {
   if (distance > pullDistance) {