@mpxjs/webpack-plugin 2.10.4-beta.13 → 2.10.4-beta.15

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -70,7 +70,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -121,6 +121,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTranstion = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 的时间
     const moveTime = useSharedValue(0);
+    // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+    const anotherDirectionMove = useSharedValue(0);
+    // 另一个方向的
+    const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase();
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
@@ -403,7 +407,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
-        updateCurrent(props.current || 0, step.value);
+        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+        // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+        if (props.current !== currentIndex.value) {
+            updateCurrent(props.current || 0, step.value);
+        }
     }, [props.current]);
     useEffect(() => {
         autoplayShared.value = autoplay;
@@ -466,20 +474,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 targetOffset: -moveToTargetPos
             };
         }
-        function canMove(eventData) {
+        function checkUnCircular(eventData) {
             'worklet';
             const { translation } = eventData;
             const currentOffset = Math.abs(offset.value);
-            if (!circularShared.value) {
-                if (translation < 0) {
-                    return currentOffset < step.value * (childrenLength.value - 1);
-                }
-                else {
-                    return currentOffset > 0;
-                }
+            // 向右滑动swiper
+            if (translation < 0) {
+                const boundaryOffset = step.value * (childrenLength.value - 1);
+                const gestureMovePos = Math.abs(translation) + currentOffset;
+                return {
+                    // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+                    targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+                    canMove: currentOffset < boundaryOffset
+                };
             }
             else {
-                return true;
+                const gestureMovePos = currentOffset - translation;
+                return {
+                    targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+                    canMove: currentOffset > 0
+                };
             }
         }
         function handleEnd(eventData) {
@@ -530,7 +544,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        function handleLongPress() {
+        function computeHalf() {
             'worklet';
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
@@ -540,6 +554,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
+            return {
+                diffOffset,
+                half
+            };
+        }
+        function handleLongPress() {
+            'worklet';
+            const { diffOffset, half } = computeHalf();
             if (+diffOffset === 0) {
                 runOnJS(resumeLoop)();
             }
@@ -599,19 +621,30 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(pauseLoop)();
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
+            anotherDirectionMove.value = e[anotherAbso];
             moveTime.value = new Date().getTime();
         })
-            .onTouchesMove((e) => {
+            .onUpdate((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
+            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
                 translation: moveDistance
             };
-            // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-            if (!circularShared.value && !canMove(eventData)) {
+            // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+            const { half } = computeHalf();
+            if (half) {
+                const { selectedIndex } = getTargetPosition(eventData);
+                currentIndex.value = selectedIndex;
+            }
+            // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+            const { canMove, targetOffset } = checkUnCircular(eventData);
+            if (!circularShared.value) {
+                if (canMove) {
+                    offset.value = targetOffset;
+                    preAbsolutePos.value = e[strAbso];
+                }
                 return;
             }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
@@ -621,36 +654,32 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
-            preAbsolutePos.value = touchEventData[strAbso];
+            preAbsolutePos.value = e[strAbso];
         })
-            .onTouchesUp((e) => {
+            .onFinalize((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - moveTranstion.value;
+            const moveDistance = e[strAbso] - moveTranstion.value;
             touchfinish.value = true;
             const eventData = {
                 translation: moveDistance
             };
-            // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-            if (!circularShared.value && !canMove(eventData)) {
-                return;
-            }
             const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
             if (Math.abs(strVelocity) < longPressRatio) {
                 handleLongPress();
             }
             else {
+                // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
                 handleEnd(eventData);
             }
         }).withRef(swiperGestureRef);
         // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
         if (dir === 'x') {
-            gesturePan.activeOffsetX([-1, 1]).failOffsetY([-5, 5]);
+            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
         }
         else {
-            gesturePan.activeOffsetY([-1, 1]).failOffsetX([-5, 5]);
+            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
         }
         // 手势协同2.0
         if (simultaneousHandlers && simultaneousHandlers.length) {
@@ -691,7 +720,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
       {showsPagination && renderPagination()}
     </View>);
     }
-    if (children.length === 1) {
+    if (children.length === 1 || disableGesture) {
         return renderSwiper();
     }
     else {

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -22,6 +22,7 @@ import { SwiperContext } from './context'
  * ✔ easing-function  ="easeOutCubic"
  * ✘ display-multiple-items
  * ✘ snap-to-edge
+ * ✔ disableGesture
  */
 type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
 type StrAbsoType = 'absoluteX' | 'absoluteY'
@@ -57,6 +58,7 @@ interface SwiperProps {
   'external-var-context'?: Record<string, any>
   'wait-for'?: Array<GestureHandler>
   'simultaneous-handlers'?: Array<GestureHandler>
+  disableGesture?: boolean
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
@@ -140,7 +142,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     'wait-for': waitFor = [],
     style = {},
     autoplay = false,
-    circular = false
+    circular = false,
+    disableGesture = false
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -199,6 +202,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 的时间
   const moveTime = useSharedValue(0)
+  // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+  const anotherDirectionMove = useSharedValue(0)
+  // 另一个方向的
+  const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase() as StrAbsoType
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
@@ -496,7 +503,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    updateCurrent(props.current || 0, step.value)
+    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+    // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+    if (props.current !== currentIndex.value) {
+      updateCurrent(props.current || 0, step.value)
+    }
   }, [props.current])
 
   useEffect(() => {
@@ -559,18 +570,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         targetOffset: -moveToTargetPos
       }
     }
-    function canMove (eventData: EventDataType) {
+    function checkUnCircular (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
       const currentOffset = Math.abs(offset.value)
-      if (!circularShared.value) {
-        if (translation < 0) {
-          return currentOffset < step.value * (childrenLength.value - 1)
-        } else {
-          return currentOffset > 0
+      // 向右滑动swiper
+      if (translation < 0) {
+        const boundaryOffset = step.value * (childrenLength.value - 1)
+        const gestureMovePos = Math.abs(translation) + currentOffset
+        return {
+          // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+          targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+          canMove: currentOffset < boundaryOffset
         }
       } else {
-        return true
+        const gestureMovePos = currentOffset - translation
+        return {
+          targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+          canMove: currentOffset > 0
+        }
       }
     }
     function handleEnd (eventData: EventDataType) {
@@ -620,7 +638,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    function handleLongPress () {
+    function computeHalf () {
       'worklet'
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
@@ -630,6 +648,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
+      return {
+        diffOffset,
+        half
+      }
+    }
+    function handleLongPress () {
+      'worklet'
+      const { diffOffset, half } = computeHalf()
       if (+diffOffset === 0) {
         runOnJS(resumeLoop)()
       } else if (half) {
@@ -685,18 +711,29 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         runOnJS(pauseLoop)()
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
+        anotherDirectionMove.value = e[anotherAbso]
         moveTime.value = new Date().getTime()
       })
-      .onTouchesMove((e) => {
+      .onUpdate((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
+        const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance
         }
-        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        if (!circularShared.value && !canMove(eventData)) {
+        // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+        const { half } = computeHalf()
+        if (half) {
+          const { selectedIndex } = getTargetPosition(eventData)
+          currentIndex.value = selectedIndex
+        }
+        // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+        const { canMove, targetOffset } = checkUnCircular(eventData)
+        if (!circularShared.value) {
+          if (canMove) {
+            offset.value = targetOffset
+            preAbsolutePos.value = e[strAbso]
+          }
           return
         }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
@@ -705,33 +742,29 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           offset.value = moveDistance + offset.value
         }
-        preAbsolutePos.value = touchEventData[strAbso]
+        preAbsolutePos.value = e[strAbso]
       })
-      .onTouchesUp((e) => {
+      .onFinalize((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - moveTranstion.value
+        const moveDistance = e[strAbso] - moveTranstion.value
         touchfinish.value = true
         const eventData = {
           translation: moveDistance
         }
-        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-        if (!circularShared.value && !canMove(eventData)) {
-          return
-        }
         const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
         if (Math.abs(strVelocity) < longPressRatio) {
           handleLongPress()
         } else {
+          // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
           handleEnd(eventData)
         }
       }).withRef(swiperGestureRef)
     // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
     if (dir === 'x') {
-      gesturePan.activeOffsetX([-1, 1]).failOffsetY([-5, 5])
+      gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5])
     } else {
-      gesturePan.activeOffsetY([-1, 1]).failOffsetX([-5, 5])
+      gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5])
     }
     // 手势协同2.0
     if (simultaneousHandlers && simultaneousHandlers.length) {
@@ -775,7 +808,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     </View>)
   }
 
-  if (children.length === 1) {
+  if (children.length === 1 || disableGesture) {
     return renderSwiper()
   } else {
     return (<GestureDetector gesture={gestureHandler}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4-beta.13",
+  "version": "2.10.4-beta.15",
   "description": "mpx compile core",
   "keywords": [
     "mpx"