fix(swiper): 设置横向轮播后，手势无法触发页面的滚动 (#3004)

oasis-cloud · web-flow · commit cb7c2c2c1778 · 2025-02-25T14:06:44.000+08:00
diff --git a/src/packages/swiper/swiper.scss b/src/packages/swiper/swiper.scss
@@ -4,9 +4,16 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  touch-action: none;
   position: relative;
 
+  &-canmove-horizontal {
+    touch-action: pan-y;
+  }
+
+  &-canmove-vertical {
+    touch-action: pan-x;
+  }
+
   &-indicator {
     display: flex;
     flex-direction: row;
@@ -28,6 +35,7 @@
     z-index: 1;
   }
 }
+
 .nut-swiper-inner {
   width: 100%;
   height: 100%;
@@ -57,6 +65,7 @@
     left: auto;
     right: 50%;
   }
+
   &-indicator-vertical {
     left: auto;
     right: 12px;
diff --git a/src/packages/swiper/swiper.tsx b/src/packages/swiper/swiper.tsx
@@ -220,18 +220,17 @@ export const Swiper = React.forwardRef<SwiperRef, Partial<SwiperProps>>(
           const y = (springs.y.get() / 100) * slideSize
           return [-x, -y]
         },
-        triggerAllEvents: true,
         bounds: () => {
           if (loop) return {}
           const slideSize = getSlideSize()
-          const swiperSize = getSwiperSize()
           if (isVertical) {
             return { top: 0, bottom: (count - 1) * slideSize }
           }
           return { left: 0, right: (count - 1) * slideSize }
         },
-        preventDefault: true,
         rubberband: true,
+        triggerAllEvents: true,
+        preventScroll: isVertical,
         axis: isVertical ? 'y' : 'x',
         pointer: {
           touch: true,
@@ -288,9 +287,9 @@ export const Swiper = React.forwardRef<SwiperRef, Partial<SwiperProps>>(
       return (
         <div
           ref={stageRef}
-          className={classNames('nut-swiper-inner', {
-            'nut-swiper-inner-vertical': isVertical,
-            'nut-swiper-inner-horizontal': !isVertical,
+          className={classNames(`${classPrefix}-inner`, {
+            [`${classPrefix}-inner-vertical`]: isVertical,
+            [`${classPrefix}-inner-horizontal`]: !isVertical,
           })}
           style={{
             ...(props.slideSize
@@ -304,7 +303,11 @@ export const Swiper = React.forwardRef<SwiperRef, Partial<SwiperProps>>(
     }
     return (
       <div
-        className={classNames('nut-swiper', className)}
+        className={classNames(
+          classPrefix,
+          `${classPrefix}-canmove-${direction}`,
+          className
+        )}
         style={style}
         ref={swiperRef}
         {...bind()}
