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

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

@@ -3,7 +3,7 @@ import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValu
 import { wrapChildren, extendObject } from './utils';
 import { createFaces } from './pickerFaces';
 import { usePickerViewColumnAnimationContext } from './pickerVIewContext';
-const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
+const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
     const offsetYShared = usePickerViewColumnAnimationContext();
     const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
     useEffect(() => {

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 } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, useDebounceCallback, useStableCallback, isIOS } from './utils';
 import useNodesRef from './useNodesRef';
 import PickerOverlay from './pickerViewOverlay';
 import PickerMask from './pickerViewMask';
@@ -20,11 +20,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         style: normalStyle
     });
     const { height: pickerH, itemHeight } = wrapperStyle;
-    const [scrollViewWidth, setScrollViewWidth] = useState('100%');
-    const [itemRawW, setItemRawW] = useState('100%');
     const [itemRawH, setItemRawH] = useState(itemHeight);
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
-    const maxScrollViewWidth = useRef(-1);
     const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const touching = useRef(false);
     const scrolling = useRef(false);
@@ -39,10 +36,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         nodeRef: scrollViewRef
     });
     // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
-    // const initialOffset = useMemo(() => ({
-    //   x: 0,
-    //   y: itemRawH * initialIndex
-    // }), [itemRawH])
     const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
     const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
     const contentContainerStyle = useMemo(() => {
@@ -52,8 +45,27 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         const calc = Math.round(y / itemRawH);
         return Math.max(0, Math.min(calc, maxIndex));
     }, [itemRawH, maxIndex]);
+    const getYofIndex = useCallback((index) => {
+        return index * itemRawH;
+    }, [itemRawH]);
+    const stableResetScrollPosition = useStableCallback((y) => {
+        console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current);
+        if (touching.current || scrolling.current) {
+            return;
+        }
+        // needReset.current = true
+        if (y % itemRawH !== 0) {
+            scrolling.current = true;
+            const targetIndex = getIndex(y);
+            const targetY = getYofIndex(targetIndex);
+            scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false });
+        }
+        else {
+            onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
+        }
+    });
+    const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10);
     useEffect(() => {
-        // console.log('[mpx-picker-view-column], useEffect000 --->', 'columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'prevIndex=', prevIndex, 'activeIndex=', activeIndex.current, 'maxIndex=', maxIndex, 'prevMaxIndex=', prevMaxIndex)
         if (!scrollViewRef.current ||
             !itemRawH ||
             touching.current ||
@@ -64,84 +76,64 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             maxIndex !== prevMaxIndex) {
             return;
         }
-        // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
         setTimeout(() => {
             scrollViewRef.current?.scrollTo({
                 x: 0,
-                y: itemRawH * initialIndex,
+                y: getYofIndex(initialIndex),
                 animated: false
             });
         }, isAndroid ? 200 : 0);
         activeIndex.current = initialIndex;
     }, [itemRawH, initialIndex]);
     const onContentSizeChange = (_w, h) => {
-        const y = itemRawH * initialIndex;
-        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y, 'itemRawH=', itemRawH)
+        const y = getYofIndex(initialIndex);
         if (y <= h) {
             setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
             }, 0);
         }
     };
-    const onScrollViewLayout = (e) => {
-        if (isAndroid) {
-            return;
-        }
-        // RN iOS bug: https://github.com/facebook/react-native/issues/36135
-        const { width } = e.nativeEvent.layout;
-        const widthInt = Math.ceil(width);
-        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'width=', width, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
-        if (widthInt !== scrollViewWidth) {
-            const maxW = maxScrollViewWidth.current;
-            if (maxW !== -1 && widthInt > maxW) {
-                return;
-            }
-            if (maxW === -1) {
-                maxScrollViewWidth.current = Math.ceil(widthInt * 1.5);
-            }
-            setScrollViewWidth(widthInt);
-        }
-        if (itemRawW === '100%') {
-            setItemRawW(widthInt);
-        }
-    };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
-        // console.log('[mpx-picker-view-column], onItemLayout --->', 'columnIndex=', columnIndex, 'width=', width)
         if (rawH && itemRawH !== rawH) {
             setItemRawH(rawH);
         }
     };
-    const onTouchStart = () => {
+    const onScrollBeginDrag = () => {
+        isIOS && debounceResetScrollPosition.clear();
         touching.current = true;
         prevScrollingInfo.current = {
             index: activeIndex.current,
-            y: activeIndex.current * itemRawH
+            y: getYofIndex(activeIndex.current)
         };
     };
-    const onTouchEnd = () => {
-        touching.current = false;
-    };
-    const onTouchCancel = () => {
+    const onScrollEndDrag = (e) => {
         touching.current = false;
+        const { y } = e.nativeEvent.contentOffset;
+        if (isIOS) {
+            if (y > 0 && y < snapToOffsets[maxIndex]) {
+                debounceResetScrollPosition(y);
+            }
+        }
     };
     const onMomentumScrollBegin = () => {
+        isIOS && debounceResetScrollPosition.clear();
         scrolling.current = true;
     };
     const onMomentumScrollEnd = (e) => {
         scrolling.current = false;
-        if (!itemRawH) {
-            return;
-        }
         const { y: scrollY } = e.nativeEvent.contentOffset;
-        let calcIndex = Math.round(scrollY / itemRawH);
+        if (isIOS && scrollY % itemRawH !== 0) {
+            return debounceResetScrollPosition(scrollY);
+        }
+        const calcIndex = getIndex(scrollY);
         activeIndex.current = calcIndex;
         if (calcIndex !== initialIndex) {
-            calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0;
             onSelectChange(calcIndex);
         }
     };
     const onScroll = (e) => {
+        const { y } = e.nativeEvent.contentOffset;
         if (isAndroid) {
             return;
         }
@@ -150,7 +142,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         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) {
@@ -158,7 +149,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 if (currentId !== prevIndex) {
                     prevScrollingInfo.current = {
                         index: currentId,
-                        y: currentId * itemRawH
+                        y: getYofIndex(currentId)
                     };
                     // vibrateShort({ type: 'selection' })
                     pickerVibrate();
@@ -167,11 +158,11 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     };
     const renderInnerchild = () => columnData.map((item, index) => {
-        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} itemWidth={itemRawW} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: scrollViewWidth }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onLayout={onScrollViewLayout} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
           {renderInnerchild()}
         </Reanimated.ScrollView>
       </PickerViewColumnAnimationContext.Provider>);

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler';
-import { RefreshControl } from 'react-native';
+import { RefreshControl, Platform } 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,6 +184,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             visibleLength
         });
     }
+    const observerTimers = {};
     function onScroll(e) {
         const { bindscroll } = props;
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
@@ -203,7 +204,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         if (enableTriggerIntersectionObserver && intersectionObservers) {
             for (const key in intersectionObservers) {
-                intersectionObservers[key].throttleMeasure();
+                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);
+                }
             }
         }
     }

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

@@ -62,7 +62,7 @@ const _WebView = forwardRef((props, ref) => {
                 src: res.nativeEvent?.url
             }
         };
-        bindload(result);
+        bindload?.(result);
     };
     const _error = function (res) {
         const result = {
@@ -72,7 +72,7 @@ const _WebView = forwardRef((props, ref) => {
                 src: ''
             }
         };
-        binderror(result);
+        binderror?.(result);
     };
     const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {

package/lib/runtime/components/react/dist/utils.jsx

@@ -451,13 +451,14 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
 export const debounce = (func, delay) => {
     let timer;
     const wrapper = (...args) => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
         timer = setTimeout(() => {
             func(...args);
         }, delay);
     };
     wrapper.clear = () => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
+        timer = null;
     };
     return wrapper;
 };

package/lib/runtime/components/react/mpx-picker-view-column-item.tsx

@@ -9,7 +9,7 @@ interface PickerColumnItemProps {
   item: React.ReactElement
   index: number
   itemHeight: number
-  itemWidth: number | '100%'
+  itemWidth?: number | '100%'
   textStyleFromParent: Record<string, any>
   textStyle: Record<string, any>
   hasVarDec: boolean
@@ -23,7 +23,7 @@ const _PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
   item,
   index,
   itemHeight,
-  itemWidth,
+  itemWidth = '100%',
   textStyleFromParent,
   textStyle,
   hasVarDec,

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, useDebounceCallback, useStableCallback, isIOS } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import PickerOverlay from './pickerViewOverlay'
 import PickerMask from './pickerViewMask'
@@ -64,11 +64,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
 
   const { height: pickerH, itemHeight } = wrapperStyle
-  const [scrollViewWidth, setScrollViewWidth] = useState<number | '100%'>('100%')
-  const [itemRawW, setItemRawW] = useState<number | '100%'>('100%')
   const [itemRawH, setItemRawH] = useState(itemHeight)
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
-  const maxScrollViewWidth = useRef(-1)
   const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const touching = useRef(false)
   const scrolling = useRef(false)
@@ -88,11 +85,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
 
-  // const initialOffset = useMemo(() => ({
-  //   x: 0,
-  //   y: itemRawH * initialIndex
-  // }), [itemRawH])
-
   const paddingHeight = useMemo(
     () => Math.round((pickerH - itemHeight) / 2),
     [pickerH, itemHeight]
@@ -112,8 +104,28 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     return Math.max(0, Math.min(calc, maxIndex))
   }, [itemRawH, maxIndex])
 
+  const getYofIndex = useCallback((index: number) => {
+    return index * itemRawH
+  }, [itemRawH])
+
+  const stableResetScrollPosition = useStableCallback((y: number) => {
+    console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current)
+    if (touching.current || scrolling.current) {
+      return
+    }
+    // needReset.current = true
+    if (y % itemRawH !== 0) {
+      scrolling.current = true
+      const targetIndex = getIndex(y)
+      const targetY = getYofIndex(targetIndex)
+      scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false })
+    } else {
+      onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } })
+    }
+  })
+  const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10)
+
   useEffect(() => {
-    // console.log('[mpx-picker-view-column], useEffect000 --->', 'columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'prevIndex=', prevIndex, 'activeIndex=', activeIndex.current, 'maxIndex=', maxIndex, 'prevMaxIndex=', prevMaxIndex)
     if (
       !scrollViewRef.current ||
       !itemRawH ||
@@ -126,11 +138,10 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     ) {
       return
     }
-    // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
     setTimeout(() => {
       scrollViewRef.current?.scrollTo({
         x: 0,
-        y: itemRawH * initialIndex,
+        y: getYofIndex(initialIndex),
         animated: false
       })
     }, isAndroid ? 200 : 0)
@@ -138,8 +149,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }, [itemRawH, initialIndex])
 
   const onContentSizeChange = (_w: number, h: number) => {
-    const y = itemRawH * initialIndex
-    // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y, 'itemRawH=', itemRawH)
+    const y = getYofIndex(initialIndex)
     if (y <= h) {
       setTimeout(() => {
         scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
@@ -147,72 +157,52 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
   }
 
-  const onScrollViewLayout = (e: LayoutChangeEvent) => {
-    if (isAndroid) {
-      return
-    }
-    // RN iOS bug: https://github.com/facebook/react-native/issues/36135
-    const { width } = e.nativeEvent.layout
-    const widthInt = Math.ceil(width)
-    // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'width=', width, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
-    if (widthInt !== scrollViewWidth) {
-      const maxW = maxScrollViewWidth.current
-      if (maxW !== -1 && widthInt > maxW) {
-        return
-      }
-      if (maxW === -1) {
-        maxScrollViewWidth.current = Math.ceil(widthInt * 1.5)
-      }
-      setScrollViewWidth(widthInt)
-    }
-    if (itemRawW === '100%') {
-      setItemRawW(widthInt)
-    }
-  }
-
   const onItemLayout = (e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
-    // console.log('[mpx-picker-view-column], onItemLayout --->', 'columnIndex=', columnIndex, 'width=', width)
     if (rawH && itemRawH !== rawH) {
       setItemRawH(rawH)
     }
   }
 
-  const onTouchStart = () => {
+  const onScrollBeginDrag = () => {
+    isIOS && debounceResetScrollPosition.clear()
     touching.current = true
     prevScrollingInfo.current = {
       index: activeIndex.current,
-      y: activeIndex.current * itemRawH
+      y: getYofIndex(activeIndex.current)
     }
   }
 
-  const onTouchEnd = () => {
-    touching.current = false
-  }
-
-  const onTouchCancel = () => {
+  const onScrollEndDrag = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     touching.current = false
+    const { y } = e.nativeEvent.contentOffset
+    if (isIOS) {
+      if (y > 0 && y < snapToOffsets[maxIndex]) {
+        debounceResetScrollPosition(y)
+      }
+    }
   }
 
   const onMomentumScrollBegin = () => {
+    isIOS && debounceResetScrollPosition.clear()
     scrolling.current = true
   }
 
-  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent> | { nativeEvent: { contentOffset: { y: number } } }) => {
     scrolling.current = false
-    if (!itemRawH) {
-      return
-    }
     const { y: scrollY } = e.nativeEvent.contentOffset
-    let calcIndex = Math.round(scrollY / itemRawH)
+    if (isIOS && scrollY % itemRawH !== 0) {
+      return debounceResetScrollPosition(scrollY)
+    }
+    const calcIndex = getIndex(scrollY)
     activeIndex.current = calcIndex
     if (calcIndex !== initialIndex) {
-      calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0
       onSelectChange(calcIndex)
     }
   }
 
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { y } = e.nativeEvent.contentOffset
     if (isAndroid) {
       return
     }
@@ -221,7 +211,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     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) {
@@ -229,7 +218,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
         if (currentId !== prevIndex) {
           prevScrollingInfo.current = {
             index: currentId,
-            y: currentId * itemRawH
+            y: getYofIndex(currentId)
           }
           // vibrateShort({ type: 'selection' })
           pickerVibrate()
@@ -246,7 +235,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           item={item}
           index={index}
           itemHeight={itemHeight}
-          itemWidth={itemRawW}
           textStyleFromParent={textStyleFromParent}
           textStyle={textStyle}
           hasVarDec={hasVarDec}
@@ -271,14 +259,12 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
           {...layoutProps}
-          style={[{ width: scrollViewWidth }]}
+          style={[{ width: '100%' }]}
           decelerationRate="fast"
           snapToOffsets={snapToOffsets}
           onScroll={onScroll}
-          onLayout={onScrollViewLayout}
-          onTouchStart={onTouchStart}
-          onTouchEnd={onTouchEnd}
-          onTouchCancel={onTouchCancel}
+          onScrollBeginDrag={onScrollBeginDrag}
+          onScrollEndDrag={onScrollEndDrag}
           onMomentumScrollBegin={onMomentumScrollBegin}
           onMomentumScrollEnd={onMomentumScrollEnd}
           onContentSizeChange={onContentSizeChange}

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler'
-import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Platform } from 'react-native'
 import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
@@ -40,7 +40,6 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
-
 interface ScrollViewProps {
   children?: ReactNode;
   enhanced?: boolean;
@@ -319,6 +318,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     })
   }
 
+  const observerTimers: {[key: string]: any} = {}
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscroll } = props
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
@@ -340,7 +340,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateScrollOptions(e, { scrollLeft, scrollTop })
     if (enableTriggerIntersectionObserver && intersectionObservers) {
       for (const key in intersectionObservers) {
-        intersectionObservers[key].throttleMeasure()
+        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)
+        }
       }
     }
   }

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

@@ -60,17 +60,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const canGoBack = useRef<boolean>(false)
 
   const onAndroidBackPress = useCallback(() => {
-      if (canGoBack.current) {
-          webViewRef.current?.goBack()
-          return true
-      }
-      return false
+    if (canGoBack.current) {
+      webViewRef.current?.goBack()
+      return true
+    }
+    return false
   }, [canGoBack])
 
   const beforeRemoveHandle = useCallback((e: Event) => {
     if (canGoBack.current) {
-        webViewRef.current?.goBack()
-        e.preventDefault()
+      webViewRef.current?.goBack()
+      e.preventDefault()
     }
   }, [canGoBack])
 
@@ -80,10 +80,10 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   useEffect(() => {
     if (__mpx_mode__ === 'android') {
-        BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress)
-        return () => {
-            BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress)
-        }
+      BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress)
+      return () => {
+        BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress)
+      }
     }
   }, [])
 
@@ -103,7 +103,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: res.nativeEvent?.url
       }
     }
-    bindload(result)
+    bindload?.(result)
   }
   const _error = function (res: WebViewErrorEvent) {
     const result = {
@@ -113,7 +113,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: ''
       }
     }
-    binderror(result)
+    binderror?.(result)
   }
   const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
@@ -141,7 +141,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     true;
   `
-  const sendMessage = function(params: string) {
+  const sendMessage = function (params: string) {
     return `
       window.mpxWebviewMessageCallback(${params})
       true;
@@ -156,7 +156,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const _onLoadProgress = function (event: WebViewProgressEvent) {
     if (__mpx_mode__ === 'android') {
-        canGoBack.current = event.nativeEvent.canGoBack
+      canGoBack.current = event.nativeEvent.canGoBack
     }
   }
   const _message = function (res: WebViewMessageEvent) {

package/lib/runtime/components/react/utils.tsx

@@ -540,13 +540,14 @@ export const debounce = <T extends AnyFunc> (
 ): ((...args: Parameters<T>) => void) & { clear: () => void } => {
   let timer: any
   const wrapper = (...args: ReadonlyArray<any>) => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
     timer = setTimeout(() => {
       func(...args)
     }, delay)
   }
   wrapper.clear = () => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
+    timer = null
   }
   return wrapper
 }

package/package.json

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