perf: carousel

packages/zarm/src/carousel/index.tsx

@@ -68,8 +68,6 @@
     moveTimeSpan,
   } = props;
 
-  const [isDragging, setIsDragging] = useState(false);
-
   const stateRef = useRef<StateProps>({
     activeIndex: propActiveIndex!,
     activeIndexChanged: false,
@@ -135,7 +133,10 @@
     [isVertical],
   );
 
+  const onMoving = useRef(false);
+
   const transitionEnd = useCallback(() => {
+    onMoving.current = false;
     const { activeIndex, activeIndexChanged } = stateRef.current;
     const dom = carouselItemsRef.current;
     const index = loop ? activeIndex + 1 : activeIndex;
@@ -199,25 +200,32 @@
     onJumpTo(stateRef.current.activeIndex);
   }, [onJumpTo]);
 
+  const intervalRef = useRef<number>();
+
   const bind = useDrag(
     (state) => {
-      if (!state.intentional) return false;
-      setIsDragging(true);
       let { activeIndex } = stateRef.current;
+      if (onMoving.current) {
+        if (activeIndex <= 0) {
+         onJumpTo(0);
+        } else if (activeIndex >= count - 1) {
+          onJumpTo(count - 1);
+        }
+        onMoving.current = false;
+      }
+      if (!state.intentional) {
+        return false;
+      };
+      intervalRef.current && window.clearInterval(intervalRef.current);
+
       const { offset, elapsedTime } = state;
 
       const [offsetX, offsetY] = offset;
       const index = isVertical ? 1 : 0;
       if (!offset[index]) {
         return false;
       }
-      if (loop) {
-        if (activeIndex <= 0) {
-          onJumpTo(0);
-        } else if (activeIndex >= count - 1) {
-          onJumpTo(count - 1);
-        }
-      }
+
       const action = (!isVertical && offsetX > 0) || (isVertical && offsetY > 0) ? 'prev' : 'next';
       if (
         !loop &&
@@ -237,8 +245,10 @@
         if (ratio >= moveDistanceRatio! || elapsedTime <= moveTimeSpan!) {
           activeIndex = action === 'next' ? activeIndex + 1 : activeIndex - 1;
         }
+        if (loop && (activeIndex >= count - 1 || activeIndex <= 1)) {
+          onMoving.current = true;
+        }
         onSlideTo(activeIndex);
-        setIsDragging(false);
         return false;
       }
       doTransition(
@@ -257,18 +267,14 @@
   );
 
   useEffect(() => {
-    if (!autoPlay || isDragging) return;
-    const interval = window.setInterval(() => {
-      if (!loop && stateRef.current.activeIndex === count) {
-        interval && clearInterval(interval);
-        return false;
-      }
-      onSlideTo(stateRef.current.activeIndex + 1);
+    if (!autoPlay || count <= 1) return;
+    intervalRef.current = window.setInterval(() => {
+      !onMoving.current && onSlideTo(stateRef.current.activeIndex + 1);
     }, autoPlayIntervalTime);
     return () => {
-      window.clearInterval(interval);
+      window.clearInterval(intervalRef.current);
     };
-  }, [isDragging, autoPlay, autoPlayIntervalTime, loop, onSlideTo]);
+  }, [autoPlay, autoPlayIntervalTime, loop, onSlideTo, stateRef.current.activeIndex]);
 
   useEffect(() => {
     // 监听窗口变化

packages/zarm/src/carousel/style/component.scss

@@ -9,10 +9,11 @@
 
   position: relative;
   overflow: hidden;
+  touch-action: none;
 
   @include e(items) {
     display: flex;
-    transform-style: preserve-3d;
+    // transform-style: preserve-3d;
     transition-property: transform;
   }