@mpxjs/webpack-plugin 2.9.69-beta.6 → 2.9.69-beta.7

package/lib/config.js

@@ -138,7 +138,9 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'on') {
-        return dash2hump(prefix + '-' + eventName)
+        return prefix + dash2hump(eventName.replace(/^./, (matched) => {
+          return matched.toUpperCase()
+        }))
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',

package/lib/platform/template/wx/index.js

@@ -302,7 +302,9 @@ module.exports = function getSpec ({ warn, error }) {
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
           const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
           return {
-            name: dash2hump(rPrefix + '-' + rEventName) + modifierStr,
+            name: rPrefix + dash2hump(rEventName.replace(/^./, (matched) => {
+              return matched.toUpperCase()
+            })) + modifierStr,
             value
           }
         },

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

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { AppState, View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
 import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
@@ -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, style = {}, autoplay, circular } = 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, style = {}, autoplay = false, circular = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -86,15 +86,15 @@ const SwiperWrapper = forwardRef((props, ref) => {
     });
     const { textStyle } = splitStyle(normalStyle);
     const { textProps } = splitProps(props);
-    const preMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0;
-    const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0;
-    const previousMarginShared = useSharedValue(preMargin);
+    const preMargin = props['previous-margin'] ? global.__formatValue(props['previous-margin']) : 0;
+    const nextMargin = props['next-margin'] ? global.__formatValue(props['next-margin']) : 0;
+    const preMarginShared = useSharedValue(preMargin);
     const nextMarginShared = useSharedValue(nextMargin);
-    const autoplayShared = useSharedValue(autoplay || false);
+    const autoplayShared = useSharedValue(autoplay);
     // 默认前后补位的元素个数
     const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
     const patchElmNumShared = useSharedValue(patchElmNum);
-    const circularShared = useSharedValue(circular || false);
+    const circularShared = useSharedValue(circular);
     const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
     const childrenLength = useSharedValue(children.length);
@@ -121,6 +121,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTime = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    const appState = useRef(AppState.currentState);
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
@@ -234,7 +235,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }
     const { loop, pauseLoop, resumeLoop } = useMemo(() => {
         function createAutoPlay() {
-            if (!step.value)
+            if (!step.value || appState.current !== 'active')
                 return;
             let targetOffset = 0;
             let nextIndex = currentIndex.value;
@@ -245,7 +246,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     return;
                 }
                 nextIndex += 1;
-                // targetOffset = -nextIndex * step.value - previousMarginShared.value
+                // targetOffset = -nextIndex * step.value - preMarginShared.value
                 targetOffset = -nextIndex * step.value;
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
@@ -259,12 +260,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 // 默认向右, 向下
                 if (nextIndex === childrenLength.value - 1) {
                     nextIndex = 0;
-                    targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + previousMarginShared.value;
+                    targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value;
                     // 执行动画到下一帧
                     offset.value = withTiming(targetOffset, {
                         duration: easeDuration
                     }, () => {
-                        const initOffset = -step.value * patchElmNumShared.value + previousMarginShared.value;
+                        const initOffset = -step.value * patchElmNumShared.value + preMarginShared.value;
                         // 将开始位置设置为真正的位置
                         offset.value = initOffset;
                         currentIndex.value = nextIndex;
@@ -273,7 +274,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
                 else {
                     nextIndex = currentIndex.value + 1;
-                    targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + previousMarginShared.value;
+                    targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value;
                     // 执行动画到下一帧
                     offset.value = withTiming(targetOffset, {
                         duration: easeDuration,
@@ -288,7 +289,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
         // loop在JS线程中调用，createAutoPlay + useEffect中
         function loop() {
             timerId.current && clearTimeout(timerId.current);
-            timerId.current = setTimeout(createAutoPlay, intervalTimer);
+            if (appState.current === 'active') {
+                timerId.current = setTimeout(createAutoPlay, intervalTimer);
+            }
         }
         function pauseLoop() {
             timerId.current && clearTimeout(timerId.current);
@@ -356,15 +359,30 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });
+    // 监听切换前后台，默认切换到后台JS执行不会立即停止定时器还在
+    useEffect(() => {
+        const subscription = AppState.addEventListener('change', nextAppState => {
+            appState.current = nextAppState;
+            if (nextAppState === 'active' && autoplayShared.value && childrenLength.value > 1) {
+                loop();
+            }
+            else {
+                appState.current = nextAppState;
+            }
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, []);
     useEffect(() => {
         let patchStep = 0;
-        if (preMargin !== previousMarginShared.value) {
-            patchStep += preMargin - previousMarginShared.value;
+        if (preMargin !== preMarginShared.value) {
+            patchStep += preMargin - preMarginShared.value;
         }
         if (nextMargin !== nextMarginShared.value) {
             patchStep += nextMargin - nextMarginShared.value;
         }
-        previousMarginShared.value = preMargin;
+        preMarginShared.value = preMargin;
         nextMarginShared.value = nextMargin;
         const newStep = step.value - patchStep;
         if (step.value !== newStep) {
@@ -374,20 +392,25 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }, [preMargin, nextMargin]);
     useEffect(() => {
         childrenLength.value = children.length;
+        pauseLoop();
         if (children.length - 1 < currentIndex.value) {
-            pauseLoop();
             currentIndex.value = 0;
             offset.value = getOffset(0, step.value);
-            if (autoplay && children.length > 1) {
-                loop();
-            }
+        }
+        else {
+            // children变化-其他属性都不变化（比如从1变化到3或者从3变到1， 在circular的情况下offset是需要更新的）
+            currentIndex.value = props.current || 0;
+            offset.value = getOffset(props.current || 0, step.value);
+        }
+        if (autoplay && children.length > 1) {
+            loop();
         }
     }, [children.length]);
     useEffect(() => {
         updateCurrent(props.current || 0, step.value);
     }, [props.current]);
     useEffect(() => {
-        autoplayShared.value = autoplay || false;
+        autoplayShared.value = autoplay;
         updateAutoplay();
         return () => {
             if (autoplay) {
@@ -397,7 +420,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }, [autoplay]);
     useEffect(() => {
         if (circular !== circularShared.value) {
-            circularShared.value = circular || false;
+            circularShared.value = circular;
             patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0;
             offset.value = getOffset(currentIndex.value, step.value);
         }
@@ -413,7 +436,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             let isCriticalItem = false;
             // 真实滚动到的偏移量坐标
             let moveToTargetPos = 0;
-            const currentOffset = translation < 0 ? offset.value - previousMarginShared.value : offset.value + previousMarginShared.value;
+            const currentOffset = translation < 0 ? offset.value - preMarginShared.value : offset.value + preMarginShared.value;
             const computedIndex = Math.abs(currentOffset) / step.value;
             const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
@@ -424,19 +447,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
                     selectedIndex = moveToIndex - (childrenLength.value + patchElmNumShared.value);
-                    resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - previousMarginShared.value;
-                    moveToTargetPos = moveToIndex * step.value - previousMarginShared.value;
+                    resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value;
+                    moveToTargetPos = moveToIndex * step.value - preMarginShared.value;
                     isCriticalItem = true;
                 }
                 else if (moveToIndex <= patchElmNumShared.value - 1) {
                     selectedIndex = moveToIndex === 0 ? childrenLength.value - patchElmNumShared.value : childrenLength.value - 1;
-                    resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - previousMarginShared.value;
-                    moveToTargetPos = moveToIndex * step.value - previousMarginShared.value;
+                    resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value;
+                    moveToTargetPos = moveToIndex * step.value - preMarginShared.value;
                     isCriticalItem = true;
                 }
                 else {
                     selectedIndex = moveToIndex - patchElmNumShared.value;
-                    moveToTargetPos = moveToIndex * step.value - previousMarginShared.value;
+                    moveToTargetPos = moveToIndex * step.value - preMarginShared.value;
                 }
             }
             return {
@@ -495,11 +518,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
             let currentOffset = Math.abs(offset.value);
             if (circularShared.value) {
-                currentOffset += translation < 0 ? previousMarginShared.value : -previousMarginShared.value;
+                currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value;
             }
             const curIndex = currentOffset / step.value;
             const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value;
-            const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? previousMarginShared.value : 0);
+            const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0);
             offset.value = withTiming(targetOffset, {
                 duration: easeDuration,
                 easing: easeMap[easeingFunc]
@@ -515,7 +538,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
             if (circularShared.value) {
-                preOffset -= previousMarginShared.value;
+                preOffset -= preMarginShared.value;
             }
             // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -5,7 +5,7 @@ import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
-import { getCurrentPage, extendObject } from './utils';
+import { getCurrentPage } from './utils';
 import { useNavigation } from '@react-navigation/native';
 import { RouteContext } from './context';
 import { BackHandler, StyleSheet, View, Text } from 'react-native';
@@ -54,6 +54,7 @@ const _WebView = forwardRef((props, ref) => {
     const [pageLoadErr, setPageLoadErr] = useState(false);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
     const webViewRef = useRef(null);
+    const isLoaded = useRef(false);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -99,27 +100,6 @@ const _WebView = forwardRef((props, ref) => {
     if (!src) {
         return null;
     }
-    const _load = function (res) {
-        const result = {
-            type: 'load',
-            timeStamp: res.timeStamp,
-            detail: {
-                src: res.nativeEvent?.url
-            }
-        };
-        bindload?.(result);
-    };
-    const _error = function (res) {
-        setPageLoadErr(true);
-        const result = {
-            type: 'error',
-            timeStamp: res.timeStamp,
-            detail: {
-                src: ''
-            }
-        };
-        binderror && binderror(result);
-    };
     const _reload = function () {
         setPageLoadErr(false);
     };
@@ -251,22 +231,58 @@ const _WebView = forwardRef((props, ref) => {
             }
         });
     };
-    const events = {};
-    if (bindload) {
-        extendObject(events, {
-            onLoad: _load
-        });
-    }
-    extendObject(events, {
-        onError: _error
-    });
+    let isLoadError = false;
+    let fristLoaded = false;
+    let statusCode = '';
+    const onLoadEnd = function (res) {
+        fristLoaded = true;
+        isLoaded.current = true;
+        const src = res.nativeEvent?.url;
+        if (isLoadError) {
+            isLoadError = false;
+            isNavigateBack.current = false;
+            const result = {
+                type: 'error',
+                timeStamp: res.timeStamp,
+                detail: {
+                    src,
+                    statusCode
+                }
+            };
+            binderror && binderror(result);
+        }
+        else {
+            const result = {
+                type: 'load',
+                timeStamp: res.timeStamp,
+                detail: {
+                    src
+                }
+            };
+            bindload?.(result);
+        }
+    };
+    const onHttpError = function (res) {
+        isLoadError = true;
+        statusCode = res.nativeEvent?.statusCode;
+    };
+    const onError = function () {
+        statusCode = '';
+        isLoadError = true;
+        if (!fristLoaded) {
+            setPageLoadErr(true);
+        }
+    };
+    const onLoadStart = function () {
+        isLoaded.current = false;
+    };
     return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
         {pageLoadErr
             ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} allowsBackForwardNavigationGestures={true} {...events}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} pointerEvents={isLoaded ? 'auto' : 'none'} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={true}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

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

@@ -1,8 +1,8 @@
-import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { AppState, View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
 import { GestureDetector, Gesture } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
 
-import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useCallback, useMemo } from 'react'
+import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
@@ -135,8 +135,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     'parent-height': parentHeight,
     'external-var-context': externalVarContext,
     style = {},
-    autoplay,
-    circular
+    autoplay = false,
+    circular = false
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -160,15 +160,15 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   })
   const { textStyle } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
-  const preMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0
-  const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0
-  const previousMarginShared = useSharedValue(preMargin)
+  const preMargin = props['previous-margin'] ? global.__formatValue(props['previous-margin']) as number : 0
+  const nextMargin = props['next-margin'] ? global.__formatValue(props['next-margin']) as number : 0
+  const preMarginShared = useSharedValue(preMargin)
   const nextMarginShared = useSharedValue(nextMargin)
-  const autoplayShared = useSharedValue(autoplay || false)
+  const autoplayShared = useSharedValue(autoplay)
   // 默认前后补位的元素个数
   const patchElmNum = circular ? (preMargin ? 2 : 1) : 0
   const patchElmNumShared = useSharedValue(patchElmNum)
-  const circularShared = useSharedValue(circular || false)
+  const circularShared = useSharedValue(circular)
   const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
   // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
   const childrenLength = useSharedValue(children.length)
@@ -195,6 +195,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTime = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  const appState = useRef(AppState.currentState)
   const {
     // 存储layout布局信息
     layoutRef,
@@ -312,9 +313,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     return (<SwiperContext.Provider value={contextValue}>{arrChildren}</SwiperContext.Provider>)
   }
 
-  const { loop, pauseLoop, resumeLoop} = useMemo(() => {
+  const { loop, pauseLoop, resumeLoop } = useMemo(() => {
     function createAutoPlay () {
-      if (!step.value) return
+      if (!step.value || appState.current !== 'active') return
       let targetOffset = 0
       let nextIndex = currentIndex.value
       if (!circularShared.value) {
@@ -324,7 +325,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           return
         }
         nextIndex += 1
-        // targetOffset = -nextIndex * step.value - previousMarginShared.value
+        // targetOffset = -nextIndex * step.value - preMarginShared.value
         targetOffset = -nextIndex * step.value
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
@@ -337,12 +338,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         // 默认向右, 向下
         if (nextIndex === childrenLength.value - 1) {
           nextIndex = 0
-          targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + previousMarginShared.value
+          targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
           offset.value = withTiming(targetOffset, {
             duration: easeDuration
           }, () => {
-            const initOffset = -step.value * patchElmNumShared.value + previousMarginShared.value
+            const initOffset = -step.value * patchElmNumShared.value + preMarginShared.value
             // 将开始位置设置为真正的位置
             offset.value = initOffset
             currentIndex.value = nextIndex
@@ -350,7 +351,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           })
         } else {
           nextIndex = currentIndex.value + 1
-          targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + previousMarginShared.value
+          targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
           offset.value = withTiming(targetOffset, {
             duration: easeDuration,
@@ -366,7 +367,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     // loop在JS线程中调用，createAutoPlay + useEffect中
     function loop () {
       timerId.current && clearTimeout(timerId.current)
-      timerId.current = setTimeout(createAutoPlay, intervalTimer)
+      if (appState.current === 'active') {
+        timerId.current = setTimeout(createAutoPlay, intervalTimer)
+      }
     }
 
     function pauseLoop () {
@@ -434,16 +437,30 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       runOnJS(handleSwiperChange)(newIndex)
     }
   })
+  // 监听切换前后台，默认切换到后台JS执行不会立即停止定时器还在
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      appState.current = nextAppState
+      if (nextAppState === 'active' && autoplayShared.value && childrenLength.value > 1) {
+        loop()
+      } else {
+        appState.current = nextAppState
+      }
+    })
+    return () => {
+      subscription.remove()
+    }
+  }, [])
 
   useEffect(() => {
     let patchStep = 0
-    if (preMargin !== previousMarginShared.value) {
-      patchStep += preMargin - previousMarginShared.value
+    if (preMargin !== preMarginShared.value) {
+      patchStep += preMargin - preMarginShared.value
     }
     if (nextMargin !== nextMarginShared.value) {
       patchStep += nextMargin - nextMarginShared.value
     }
-    previousMarginShared.value = preMargin
+    preMarginShared.value = preMargin
     nextMarginShared.value = nextMargin
     const newStep = step.value - patchStep
     if (step.value !== newStep) {
@@ -454,13 +471,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   useEffect(() => {
     childrenLength.value = children.length
+    pauseLoop()
     if (children.length - 1 < currentIndex.value) {
-      pauseLoop()
       currentIndex.value = 0
       offset.value = getOffset(0, step.value)
-      if (autoplay && children.length > 1) {
-        loop()
-      }
+    } else {
+      // children变化-其他属性都不变化（比如从1变化到3或者从3变到1， 在circular的情况下offset是需要更新的）
+      currentIndex.value = props.current || 0
+      offset.value = getOffset(props.current || 0, step.value)
+    }
+    if (autoplay && children.length > 1) {
+      loop()
     }
   }, [children.length])
 
@@ -469,7 +490,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [props.current])
 
   useEffect(() => {
-    autoplayShared.value = autoplay || false
+    autoplayShared.value = autoplay
     updateAutoplay()
     return () => {
       if (autoplay) {
@@ -480,7 +501,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   useEffect(() => {
     if (circular !== circularShared.value) {
-      circularShared.value = circular || false
+      circularShared.value = circular
       patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0
       offset.value = getOffset(currentIndex.value, step.value)
     }
@@ -497,7 +518,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       let isCriticalItem = false
       // 真实滚动到的偏移量坐标
       let moveToTargetPos = 0
-      const currentOffset = translation < 0 ? offset.value - previousMarginShared.value : offset.value + previousMarginShared.value
+      const currentOffset = translation < 0 ? offset.value - preMarginShared.value : offset.value + preMarginShared.value
       const computedIndex = Math.abs(currentOffset) / step.value
       const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
       // 实际应该定位的索引值
@@ -507,17 +528,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       } else {
         if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
           selectedIndex = moveToIndex - (childrenLength.value + patchElmNumShared.value)
-          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - previousMarginShared.value
-          moveToTargetPos = moveToIndex * step.value - previousMarginShared.value
+          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
           isCriticalItem = true
         } else if (moveToIndex <= patchElmNumShared.value - 1) {
           selectedIndex = moveToIndex === 0 ? childrenLength.value - patchElmNumShared.value : childrenLength.value - 1
-          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - previousMarginShared.value
-          moveToTargetPos = moveToIndex * step.value - previousMarginShared.value
+          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
           isCriticalItem = true
         } else {
           selectedIndex = moveToIndex - patchElmNumShared.value
-          moveToTargetPos = moveToIndex * step.value - previousMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
         }
       }
       return {
@@ -573,11 +594,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
       let currentOffset = Math.abs(offset.value)
       if (circularShared.value) {
-        currentOffset += translation < 0 ? previousMarginShared.value : -previousMarginShared.value
+        currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value
       }
       const curIndex = currentOffset / step.value
       const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value
-      const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? previousMarginShared.value : 0)
+      const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0)
       offset.value = withTiming(targetOffset, {
         duration: easeDuration,
         easing: easeMap[easeingFunc]
@@ -593,7 +614,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
       if (circularShared.value) {
-        preOffset -= previousMarginShared.value
+        preOffset -= preMarginShared.value
       }
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
@@ -611,7 +632,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 移动的距离
       const { translation } = eventData
       const elementsLength = step.value * childrenLength.value
-  
       let isBoundary = false
       let resetOffset = 0
       // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
@@ -678,7 +698,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       })
       .onTouchesUp((e) => {
         'worklet'
-        if(touchfinish.value) return
+        if (touchfinish.value) return
         const touchEventData = e.changedTouches[0]
         const moveDistance = touchEventData[strAbso] - moveTranstion.value
         touchfinish.value = true

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -5,8 +5,8 @@ import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { getCurrentPage, extendObject } from './utils'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent, WebViewSource } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage } from './utils'
+import { WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent, WebViewHttpErrorEvent, WebViewEvent } from 'react-native-webview/lib/WebViewTypes'
 import { useNavigation } from '@react-navigation/native'
 import { RouteContext } from './context'
 import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native'
@@ -99,6 +99,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const [pageLoadErr, setPageLoadErr] = useState<boolean>(false)
   const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
   const webViewRef = useRef<WebView>(null)
+  const isLoaded = useRef<boolean>(false)
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -151,28 +152,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     return null
   }
 
-  const _load = function (res: WebViewNavigationEvent) {
-    const result = {
-      type: 'load',
-      timeStamp: res.timeStamp,
-      detail: {
-        src: res.nativeEvent?.url
-      }
-    }
-    bindload?.(result)
-  }
-  const _error = function (res: WebViewErrorEvent) {
-    setPageLoadErr(true)
-    const result = {
-      type: 'error',
-      timeStamp: res.timeStamp,
-      detail: {
-        src: ''
-      }
-    }
-    binderror && binderror(result)
-  }
-
   const _reload = function () {
     setPageLoadErr(false)
   }
@@ -307,17 +286,51 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       }
     })
   }
-  const events = {}
 
-  if (bindload) {
-    extendObject(events, {
-      onLoad: _load
-    })
+  let isLoadError = false
+  let fristLoaded = false
+  let statusCode: string | number = ''
+  const onLoadEnd = function (res: WebViewEvent) {
+    fristLoaded = true
+    isLoaded.current = true
+    const src = res.nativeEvent?.url
+    if (isLoadError) {
+      isLoadError = false
+      isNavigateBack.current = false
+      const result = {
+        type: 'error',
+        timeStamp: res.timeStamp,
+        detail: {
+          src,
+          statusCode
+        }
+      }
+      binderror && binderror(result)
+    } else {
+      const result = {
+        type: 'load',
+        timeStamp: res.timeStamp,
+        detail: {
+          src
+        }
+      }
+      bindload?.(result)
+    }
+  }
+  const onHttpError = function (res: WebViewHttpErrorEvent) {
+    isLoadError = true
+    statusCode = res.nativeEvent?.statusCode
+  }
+  const onError = function () {
+    statusCode = ''
+    isLoadError = true
+    if (!fristLoaded) {
+      setPageLoadErr(true)
+    }
+  }
+  const onLoadStart = function () {
+    isLoaded.current = false
   }
-
-  extendObject(events, {
-    onError: _error
-  })
 
   return (
       <Portal key={pageLoadErr ? 'error' : 'webview'}>
@@ -329,17 +342,21 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             </View>
             )
           : (<WebView
-        style={defaultWebViewStyle}
-        source={{ uri: src }}
-        ref={webViewRef}
-        javaScriptEnabled={true}
-        onNavigationStateChange={_changeUrl}
-        onMessage={_message}
-        injectedJavaScript={injectedJavaScript}
-        onLoadProgress={_onLoadProgress}
-        allowsBackForwardNavigationGestures={true}
-        {...events}
-      ></WebView>)}
+            style={ defaultWebViewStyle }
+            source={{ uri: src }}
+            pointerEvents={ isLoaded ? 'auto' : 'none' }
+            ref={webViewRef}
+            javaScriptEnabled={true}
+            onNavigationStateChange={_changeUrl}
+            onMessage={_message}
+            injectedJavaScript={injectedJavaScript}
+            onLoadProgress={_onLoadProgress}
+            onLoadEnd={onLoadEnd}
+            onHttpError={onHttpError}
+            onError={onError}
+            onLoadStart={onLoadStart}
+            allowsBackForwardNavigationGestures={true}
+          ></WebView>)}
       </Portal>
   )
 })

package/package.json

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