@mpxjs/webpack-plugin 2.10.4-beta.14 → 2.10.4-beta.16

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

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject, isHarmony } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -29,7 +29,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         'style'
     ], { layoutRef });
     const itemAnimatedStyle = useAnimatedStyle(() => {
-        if (!step.value)
+        if (!step.value && !isHarmony)
             return {};
         const inputRange = [step.value, 0];
         const outputRange = [0.7, 1];

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

@@ -408,7 +408,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }, [children.length]);
     useEffect(() => {
         // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
-        updateCurrent(props.current || 0, step.value);
+        // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+        if (props.current !== currentIndex.value) {
+            updateCurrent(props.current || 0, step.value);
+        }
     }, [props.current]);
     useEffect(() => {
         autoplayShared.value = autoplay;
@@ -629,7 +632,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const eventData = {
                 translation: moveDistance
             };
-            // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+            // 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) {
@@ -638,12 +647,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
                 return;
             }
-            const { half } = computeHalf();
-            // 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
-            if (half) {
-                const { selectedIndex } = getTargetPosition(eventData);
-                currentIndex.value = selectedIndex;
-            }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
             if (isBoundary && circularShared.value) {
                 offset.value = resetOffset;
@@ -662,16 +665,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const eventData = {
                 translation: moveDistance
             };
-            // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-            const { canMove } = checkUnCircular(eventData);
-            if (!circularShared.value && !canMove) {
-                return;
-            }
             const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
             if (Math.abs(strVelocity) < longPressRatio) {
                 handleLongPress();
             }
             else {
+                // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
                 handleEnd(eventData);
             }
         }).withRef(swiperGestureRef);

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

@@ -3,7 +3,7 @@ import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-nati
 import { ReactNode, forwardRef, useRef, useContext } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject, isHarmony } from './utils'
 import { SwiperContext } from './context'
 
 interface SwiperItemProps {
@@ -80,7 +80,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     ],
     { layoutRef })
   const itemAnimatedStyle = useAnimatedStyle(() => {
-    if (!step.value) return {}
+    if (!step.value && !isHarmony) return {}
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
     // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现

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

@@ -504,7 +504,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   useEffect(() => {
     // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
-    updateCurrent(props.current || 0, step.value)
+    // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+    if (props.current !== currentIndex.value) {
+      updateCurrent(props.current || 0, step.value)
+    }
   }, [props.current])
 
   useEffect(() => {
@@ -718,7 +721,13 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const eventData = {
           translation: moveDistance
         }
-        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+        // 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) {
@@ -727,12 +736,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           }
           return
         }
-        const { half } = computeHalf()
-        // 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
-        if (half) {
-          const { selectedIndex } = getTargetPosition(eventData)
-          currentIndex.value = selectedIndex
-        }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
         if (isBoundary && circularShared.value) {
           offset.value = resetOffset
@@ -749,15 +752,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const eventData = {
           translation: moveDistance
         }
-        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-        const { canMove } = checkUnCircular(eventData)
-        if (!circularShared.value && !canMove) {
-          return
-        }
         const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
         if (Math.abs(strVelocity) < longPressRatio) {
           handleLongPress()
         } else {
+          // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
           handleEnd(eventData)
         }
       }).withRef(swiperGestureRef)

package/package.json

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