@mpxjs/webpack-plugin 2.9.69-beta.2 → 2.9.69-beta.4

package/lib/react/processScript.js

@@ -26,7 +26,7 @@ module.exports = function (script, {
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
-import { Provider } from '@ant-design/react-native'
+import Provider from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-provider'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 

package/lib/runtime/components/react/context.ts

@@ -32,6 +32,19 @@ export interface IntersectionObserver {
     throttleMeasure: () => void
   }
 }
+export interface PortalManagerContextValue {
+  mount: (key: number, children: React.ReactNode) => void
+  update: (key: number, children: React.ReactNode) => void
+  unmount: (key: number) => void,
+  portals: Array<{key: number, children: React.ReactNode}>
+}
+
+export interface PortalContextValue {
+  mount: (children: React.ReactNode, key?: number, pageId?: number|null) => number| undefined
+  update: (key: number, children: React.ReactNode, pageId?: number|null) => void
+  unmount: (key: number, pageId?: number|null) => void
+  manager?: PortalManagerContextValue
+}
 
 export interface ScrollViewContextValue {
    gestureRef: React.RefObject<any> | null
@@ -60,3 +73,7 @@ export const SwiperContext = createContext({})
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
 export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+
+export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const PortalManagerContext = createContext<PortalManagerContextValue| null>(null)

package/lib/runtime/components/react/dist/context.js

@@ -11,3 +11,5 @@ export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
 export const ScrollViewContext = createContext({ gestureRef: null });
+export const PortalContext = createContext(null);
+export const PortalManagerContext = createContext(null);

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -82,8 +82,8 @@ function checkIsNeedPress(e, type, ref) {
     const nativeEvent = e.nativeEvent;
     const currentPageX = nativeEvent.changedTouches[0].pageX;
     const currentPageY = nativeEvent.changedTouches[0].pageY;
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3) {
         ref.current.needPress[type] = false;
         ref.current.startTimer[type] &&
             clearTimeout(ref.current.startTimer[type]);

package/lib/runtime/components/react/dist/locale-provider.jsx

@@ -0,0 +1,15 @@
+import { createContext, useMemo, memo } from 'react';
+import { extendObject } from './utils';
+export const LocaleContext = createContext(undefined);
+const LocaleProvider = (props) => {
+    const locale = useMemo(() => {
+        return {
+            antLocale: extendObject({}, props.locale, { exist: true })
+        };
+    }, [props.locale]);
+    return (<LocaleContext.Provider value={locale}>
+      {props.children}
+    </LocaleContext.Provider>);
+};
+LocaleProvider.displayName = 'LocaleProvider';
+export default memo(LocaleProvider);

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

@@ -34,10 +34,11 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, forwardRef, useContext } from 'react';
+import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -128,20 +129,16 @@ const Loading = ({ alone = false }) => {
 };
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
     const pageId = useContext(RouteContext);
     const formContext = useContext(FormContext);
+    const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled });
     let submitFn;
     let resetFn;
     if (formContext) {
         submitFn = formContext.submit;
         resetFn = formContext.reset;
     }
-    const refs = useRef({
-        hoverStartTimer: undefined,
-        hoverStayTimer: undefined
-    });
-    const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
     const applyHoverEffect = isHover && hoverClass !== 'none';
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
@@ -224,32 +221,6 @@ const Button = forwardRef((buttonProps, ref) => {
             });
         }
     };
-    const setStayTimer = () => {
-        clearTimeout(refs.current.hoverStayTimer);
-        refs.current.hoverStayTimer = setTimeout(() => {
-            setIsHover(false);
-            clearTimeout(refs.current.hoverStayTimer);
-        }, hoverStayTime);
-    };
-    const setStartTimer = () => {
-        clearTimeout(refs.current.hoverStartTimer);
-        refs.current.hoverStartTimer = setTimeout(() => {
-            setIsHover(true);
-            clearTimeout(refs.current.hoverStartTimer);
-        }, hoverStartTime);
-    };
-    const onTouchStart = (evt) => {
-        bindtouchstart && bindtouchstart(evt);
-        if (disabled)
-            return;
-        setStartTimer();
-    };
-    const onTouchEnd = (evt) => {
-        bindtouchend && bindtouchend(evt);
-        if (disabled)
-            return;
-        setStayTimer();
-    };
     const handleFormTypeFn = () => {
         if (formType === 'submit') {
             submitFn && submitFn();
@@ -269,8 +240,6 @@ const Button = forwardRef((buttonProps, ref) => {
         ref: nodeRef,
         style: extendObject({}, innerStyle, layoutStyle)
     }, layoutProps, {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
     }), [
         'disabled',
@@ -288,12 +257,15 @@ const Button = forwardRef((buttonProps, ref) => {
         layoutRef,
         disableTap: disabled
     });
-    return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
+    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     }));
+    return enableHoverStyle
+        ? createElement(GestureDetector, { gesture }, baseButton)
+        : baseButton;
 });
 Button.displayName = 'MpxButton';
 export default Button;

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

@@ -268,14 +268,8 @@ const Image = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    return createElement(View, innerProps, isSvg
-        ? createElement(SvgCssUri, {
-            uri: src,
-            onLayout: onSvgLoad,
-            onError: binderror && onSvgError,
-            style: extendObject({ transformOrigin: 'top left' }, modeStyle)
-        })
-        : loaded && renderImage({
+    const createBaseImage = (innerProps = {}) => {
+        return renderImage(extendObject({
             source: { uri: src },
             resizeMode: resizeMode,
             onLoad: bindload && onImageLoad,
@@ -285,7 +279,17 @@ const Image = forwardRef((props, ref) => {
                 width: isCropMode ? imageWidth : '100%',
                 height: isCropMode ? imageHeight : '100%'
             }, isCropMode ? modeStyle : {})
-        }, enableFastImage));
+        }, innerProps), enableFastImage);
+    };
+    const SvgImage = createElement(View, innerProps, createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
+        style: extendObject({ transformOrigin: 'top left' }, modeStyle)
+    }));
+    const BaseImage = createBaseImage(innerProps);
+    const LayoutImage = createElement(View, innerProps, loaded && createBaseImage());
+    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
 });
 Image.displayName = 'mpx-image';
 export default Image;

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView, Portal } from '@ant-design/react-native';
+import Portal from '../mpx-portal';
+import { PickerView } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { SafeAreaView, StyleSheet } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, useDebounceCallback, useStableCallback, isIOS } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, useDebounceCallback, useStableCallback } from './utils';
 import useNodesRef from './useNodesRef';
 import PickerOverlay from './pickerViewOverlay';
 import PickerMask from './pickerViewMask';
@@ -49,7 +49,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         return index * itemRawH;
     }, [itemRawH]);
     const stableResetScrollPosition = useStableCallback((y) => {
-        console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current);
+        // console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current, itemRawH, 'snapToOffsets=', snapToOffsets)
         if (touching.current || scrolling.current) {
             return;
         }
@@ -95,8 +95,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
-        if (rawH && itemRawH !== rawH) {
-            setItemRawH(rawH);
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
         }
     };
     const onScrollBeginDrag = () => {
@@ -111,7 +112,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         touching.current = false;
         const { y } = e.nativeEvent.contentOffset;
         if (isIOS) {
-            if (y > 0 && y < snapToOffsets[maxIndex]) {
+            if (y >= 0 && y <= snapToOffsets[maxIndex]) {
                 debounceResetScrollPosition(y);
             }
         }
@@ -123,25 +124,23 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const onMomentumScrollEnd = (e) => {
         scrolling.current = false;
         const { y: scrollY } = e.nativeEvent.contentOffset;
+        // console.log('[mpx-picker-view-column], onMomentumScrollEnd --->', 'columnIndex=', columnIndex, scrollY, itemRawH)
         if (isIOS && scrollY % itemRawH !== 0) {
             return debounceResetScrollPosition(scrollY);
         }
         const calcIndex = getIndex(scrollY);
-        activeIndex.current = calcIndex;
-        if (calcIndex !== initialIndex) {
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
             onSelectChange(calcIndex);
         }
     };
     const onScroll = (e) => {
-        const { y } = e.nativeEvent.contentOffset;
-        if (isAndroid) {
-            return;
-        }
-        // 全局注册的震动触感 hook
-        const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate;
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
         if (typeof pickerVibrate !== 'function') {
             return;
         }
+        const { y } = e.nativeEvent.contentOffset;
         const { index: prevIndex, y: _y } = prevScrollingInfo.current;
         if (touching.current || scrolling.current) {
             if (Math.abs(y - _y) >= itemRawH) {

package/lib/runtime/components/react/dist/mpx-portal/portal-consumer.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFocusedNavigation } from '@mpxjs/utils';
+const PortalConsumer = ({ manager, children }) => {
+    const keyRef = useRef(null);
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        manager.update(keyRef.current, children, curPageId);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n');
+        }
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        keyRef.current = manager.mount(children, undefined, curPageId);
+        return () => {
+            manager.unmount(keyRef.current, curPageId);
+        };
+    }, []);
+    return null;
+};
+export default PortalConsumer;

package/lib/runtime/components/react/dist/mpx-portal/portal-host.jsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { getFocusedNavigation } from '@mpxjs/utils';
+import { PortalContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+class PortalGuard {
+    nextKey = 10000;
+    add = (e) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const _queue = useRef([]);
+    const _addType = useRef(null);
+    const _removeType = useRef(null);
+    const manager = useRef(null);
+    let currentPageId;
+    const _mount = (children, _key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        const key = _key || _nextKey.current++;
+        if (manager.current) {
+            manager.current.mount(key, children);
+        }
+        else {
+            _queue.current.push({ type: 'mount', key, children });
+        }
+        return key;
+    };
+    const _unmount = (key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+        else {
+            _queue.current.push({ type: 'unmount', key });
+        }
+    };
+    const _update = (key, children, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+        else {
+            const op = { type: 'mount', key, children };
+            const index = _queue.current.findIndex((o) => o.type === 'mount' || (o.type === 'update' && o.key === key));
+            if (index > -1) {
+                _queue.current[index] = op;
+            }
+            else {
+                _queue.current.push(op);
+            }
+        }
+    };
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        currentPageId = navigation?.pageId;
+        _addType.current = TopViewEventEmitter.addListener(addType, _mount);
+        _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        return () => {
+            while (_queue.current.length && manager.current) {
+                const action = _queue.current.pop();
+                if (!action) {
+                    continue;
+                }
+                // tslint:disable-next-line:switch-default
+                switch (action.type) {
+                    case 'mount':
+                        manager.current?.mount(action.key, action.children);
+                        break;
+                    case 'update':
+                        manager.current?.update(action.key, action.children);
+                        break;
+                    case 'unmount':
+                        manager.current?.unmount(action.key);
+                        break;
+                }
+            }
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount: _mount,
+            update: _update,
+            unmount: _unmount
+        }}>
+      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -0,0 +1,40 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+const _PortalManager = forwardRef((props, ref) => {
+    const [state, setState] = useState({
+        portals: []
+    });
+    const mount = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: [...prevState.portals, { key, children }]
+        }));
+    }, [state]);
+    const update = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: prevState.portals.map((item) => {
+                if (item.key === key) {
+                    return { ...item, children };
+                }
+                return item;
+            })
+        }));
+    }, [state]);
+    const unmount = useCallback((key) => {
+        setState((prevState) => ({
+            portals: prevState.portals.filter((item) => item.key !== key)
+        }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        mount,
+        update,
+        unmount,
+        portals: state.portals
+    }));
+    return (<>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;

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

@@ -0,0 +1,12 @@
+import { PortalContext } from './context';
+import PortalConsumer from './mpx-portal/portal-consumer';
+import PortalHost, { portal } from './mpx-portal/portal-host';
+const Portal = ({ children }) => {
+    return (<PortalContext.Consumer>
+      {(manager) => (<PortalConsumer manager={manager}>{children}</PortalConsumer>)}
+    </PortalContext.Consumer>);
+};
+Portal.Host = PortalHost;
+Portal.add = portal.add;
+Portal.remove = portal.remove;
+export default Portal;

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

@@ -0,0 +1,31 @@
+import { createContext, useMemo } from 'react';
+import LocaleProvider from './locale-provider';
+import Portal from './mpx-portal';
+import { extendObject } from './utils';
+const defaultTheme = {
+    color_text_base: '#000000',
+    color_text_base_inverse: '#ffffff',
+    color_text_secondary: '#a4a9b0',
+    color_text_placeholder: '#bbbbbb',
+    color_text_disabled: '#bbbbbb',
+    color_text_caption: '#888888',
+    color_text_paragraph: '#333333',
+    color_error: '#ff4d4f',
+    color_warning: '#faad14',
+    color_success: '#52c41a',
+    color_primary: '#1677ff'
+};
+export const ThemeContext = createContext(defaultTheme);
+const ThemeProvider = (props) => {
+    const { value, children } = props;
+    const theme = useMemo(() => (extendObject({}, defaultTheme, value)), [value]);
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+const Provider = ({ locale, theme, children }) => {
+    return (<LocaleProvider locale={locale}>
+      <ThemeProvider value={theme}>
+        <Portal.Host>{children}</Portal.Host>
+      </ThemeProvider>
+    </LocaleProvider>);
+};
+export default Provider;

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -2,7 +2,7 @@
  * ✔ enable
  */
 import { createElement, Fragment } from 'react';
-import { Portal } from '@ant-design/react-native';
+import Portal from './mpx-portal';
 import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
     const { children, enable = true } = props;

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler';
-import { RefreshControl, Platform } from 'react-native';
+import { RefreshControl } from 'react-native';
 import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
@@ -184,7 +184,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             visibleLength
         });
     }
-    const observerTimers = {};
     function onScroll(e) {
         const { bindscroll } = props;
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
@@ -202,20 +201,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
-        if (enableTriggerIntersectionObserver && intersectionObservers) {
-            for (const key in intersectionObservers) {
-                if (Platform.OS === 'android') {
-                    intersectionObservers[key].throttleMeasure();
-                }
-                else {
-                    // TODO: 由于iOS在onScroll滚动的过程中view的计算measureInWindow计算的值不发生变化，所以暂时在ios上加一个延时计算
-                    observerTimers[key] && clearTimeout(observerTimers[key]);
-                    observerTimers[key] = setTimeout(() => {
-                        intersectionObservers[key].throttleMeasure();
-                    }, 300);
-                }
-            }
-        }
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -234,6 +219,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         onStartReached(e);
         onEndReached(e);
+        updateIntersection();
+    }
+    function updateIntersection() {
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
     }
     function scrollToOffset(x = 0, y = 0) {
         if (scrollViewRef.current) {
@@ -292,6 +285,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function onScrollDrag(e) {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        updateIntersection();
     }
     const scrollAdditionalProps = extendObject({
         style: extendObject({}, innerStyle, layoutStyle),

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

@@ -361,8 +361,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         let isCriticalItem = false;
         // 真实滚动到的偏移量坐标
         let moveToTargetPos = 0;
-        // 当前的位置
-        const currentOffset = offset.value - previousMargin;
+        const currentOffset = translation < 0 ? offset.value - previousMargin : offset.value + previousMargin;
         const computedIndex = Math.abs(currentOffset) / step.value;
         const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
         // 实际应该定位的索引值
@@ -442,10 +441,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
         'worklet';
         const { translation } = eventData;
         // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
-        const currentOffset = Math.abs(offset.value);
+        let currentOffset = Math.abs(offset.value);
+        if (props.circular) {
+            currentOffset += translation < 0 ? previousMargin : -previousMargin;
+        }
         const curIndex = currentOffset / step.value;
         const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElementNum;
-        const targetOffset = -(moveToIndex + patchElementNum) * step.value + (translation < 0 ? -previousMargin : previousMargin);
+        const targetOffset = -(moveToIndex + patchElementNum) * step.value + (props.circular ? -previousMargin : 0);
         offset.value = withTiming(targetOffset, {
             duration: easeDuration,
             easing: easeMap[easeingFunc]
@@ -459,7 +461,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function handleLongPress(eventData) {
         'worklet';
         const { translation } = eventData;
-        const currentOffset = Math.abs(offset.value) + (translation < 0 ? previousMargin : -previousMargin);
+        let currentOffset = Math.abs(offset.value);
+        if (props.circular) {
+            currentOffset += previousMargin;
+        }
         const half = currentOffset % step.value > step.value / 2;
         // 向右trans < 0, 向左trans > 0
         const isExceedHalf = translation < 0 ? half : !half;