@mpxjs/webpack-plugin 2.10.4-beta.4 → 2.10.4-beta.5

package/lib/platform/template/wx/component-config/index.js

@@ -42,6 +42,8 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const stickyHeader = require('./sticky-header')
+const stickySection = require('./sticky-section')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -125,6 +127,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    stickyHeader({ print }),
+    stickySection({ print })
   ]
 }

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-header'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    }
+  }
+}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-section'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
+import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -42,7 +43,8 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
@@ -50,6 +52,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -72,6 +79,8 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })

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

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
@@ -10,5 +12,6 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

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

@@ -32,6 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Animated as RNAnimated } from 'react-native';
 import { isValidElement, Children, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react';
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
@@ -39,9 +40,11 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
+const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -89,12 +92,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         },
         gestureRef: scrollViewRef
     });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const contextValue = useMemo(() => {
         return {
-            gestureRef: scrollViewRef
+            gestureRef: scrollViewRef,
+            scrollOffset
         };
     }, []);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const hasRefresherLayoutRef = useRef(false);
     // layout 完成前先隐藏，避免安卓闪烁问题
     const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {}; }, [hasRefresherLayoutRef.current]);
@@ -320,6 +324,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         updateIntersection();
     }
+    const scrollHandler = RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+        useNativeDriver: true,
+        listener: (event) => {
+            onScroll(event);
+        }
+    });
     function onScrollDragStart(e) {
         hasCallScrollToLower.current = false;
         hasCallScrollToUpper.current = false;
@@ -476,7 +486,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
         ref: scrollViewRef,
-        onScroll: onScroll,
+        onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -518,13 +528,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindscrolltolower',
         'bindrefresherrefresh'
     ], { layoutRef });
-    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollView, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
+    const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView;
+    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollViewComponent, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     })))));
-    const commonScrollView = createElement(ScrollView, extendObject(innerProps, {
+    const commonScrollView = createElement(ScrollViewComponent, extendObject({}, innerProps, {
         refreshControl: refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, useId } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { ScrollViewContext, StickyContext } from './context';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { error } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
+    const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const scrollViewContext = useContext(ScrollViewContext);
+    const stickyContext = useContext(StickyContext);
+    const { scrollOffset } = scrollViewContext;
+    const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
+    const headerRef = useRef(null);
+    const isStickOnTopRef = useRef(false);
+    const id = useId();
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const headerTopAnimated = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        registerStickyHeader({ key: id, updatePosition });
+        return () => {
+            unregisterStickyHeader(id);
+        };
+    }, []);
+    function updatePosition() {
+        if (headerRef.current) {
+            const scrollViewRef = scrollViewContext.gestureRef;
+            if (scrollViewRef && scrollViewRef.current) {
+                headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
+                    Animated.timing(headerTopAnimated, {
+                        toValue: top,
+                        duration: 0,
+                        useNativeDriver: true
+                    }).start();
+                });
+            }
+            else {
+                error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference');
+            }
+        }
+    }
+    function onLayout(e) {
+        updatePosition();
+    }
+    useNodesRef(props, ref, headerRef, {
+        style: normalStyle
+    });
+    useEffect(() => {
+        if (!bindstickontopchange)
+            return;
+        const listener = scrollOffset.addListener((state) => {
+            const currentScrollValue = state.value;
+            const newIsStickOnTop = currentScrollValue > headerTopAnimated._value;
+            if (newIsStickOnTop !== isStickOnTopRef.current) {
+                isStickOnTopRef.current = newIsStickOnTop;
+                bindstickontopchange(getCustomEvent('stickontopchange', {}, {
+                    detail: {
+                        isStickOnTop: newIsStickOnTop
+                    },
+                    layoutRef
+                }, props));
+            }
+        });
+        return () => {
+            scrollOffset.removeListener(listener);
+        };
+    }, []);
+    const animatedStyle = useMemo(() => {
+        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'extend'
+        });
+        const finalTranslateY = offsetTop === 0
+            ? translateY
+            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, offsetTop],
+                extrapolate: 'clamp'
+            }));
+        return {
+            transform: [{ translateY: finalTranslateY }]
+        };
+    }, [scrollOffset, headerTopAnimated, offsetTop]);
+    const innerProps = useInnerProps(props, extendObject({}, {
+        ref: headerRef,
+        style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+            paddingTop: padding[0] || 0,
+            paddingRight: padding[1] || 0,
+            paddingBottom: padding[2] || 0,
+            paddingLeft: padding[3] || 0
+        })
+    }, layoutProps), [], { layoutRef });
+    return (createElement(Animated.View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+const styles = StyleSheet.create({
+    content: {
+        width: '100%',
+        zIndex: 10
+    }
+});
+_StickyHeader.displayName = 'MpxStickyHeader';
+export default _StickyHeader;

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -0,0 +1,45 @@
+import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { StickyContext } from './context';
+import useInnerProps from './getInnerListeners';
+const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
+    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const sectionRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const stickyHeaders = useRef(new Map());
+    const registerStickyHeader = useCallback((item) => {
+        stickyHeaders.current.set(item.id, item);
+    }, []);
+    const unregisterStickyHeader = useCallback((id) => {
+        stickyHeaders.current.delete(id);
+    }, []);
+    const contextValue = useMemo(() => ({
+        registerStickyHeader,
+        unregisterStickyHeader
+    }), []);
+    useNodesRef(props, ref, sectionRef, {
+        style: normalStyle
+    });
+    function onLayout() {
+        stickyHeaders.current.forEach(item => {
+            item.updatePosition();
+        });
+    }
+    const innerProps = useInnerProps(props, extendObject({
+        style: extendObject(innerStyle, layoutStyle),
+        ref: sectionRef
+    }, layoutProps), [], { layoutRef });
+    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }))));
+});
+_StickySection.displayName = 'MpxStickySection';
+export default _StickySection;

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

@@ -451,7 +451,18 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                     const { y: navigationY = 0 } = navigation?.layout || {};
-                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
+                    layoutRef.current = {
+                        x,
+                        y: y - navigationY,
+                        width,
+                        height,
+                        offsetLeft,
+                        offsetTop: offsetTop - navigationY,
+                        _x: x,
+                        _y: y,
+                        _offsetLeft: offsetLeft,
+                        _offsetTop: offsetTop
+                    };
                 });
             }
             onLayout && onLayout(e);

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler'
-import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Animated as RNAnimated } from 'react-native'
 import { isValidElement, Children, JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react'
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
@@ -46,7 +46,6 @@ interface ScrollViewProps {
   enhanced?: boolean;
   bounces?: boolean;
   style?: ViewStyle;
-  scrollEventThrottle?: number;
   'scroll-x'?: boolean;
   'scroll-y'?: boolean;
   'enable-back-to-top'?: boolean;
@@ -70,6 +69,7 @@ interface ScrollViewProps {
   'parent-font-size'?: number;
   'parent-width'?: number;
   'parent-height'?: number;
+  'enable-sticky'?: boolean;
   'wait-for'?: Array<GestureHandler>;
   'simultaneous-handlers'?: Array<GestureHandler>;
   'scroll-event-throttle'?:number;
@@ -108,6 +108,8 @@ type ScrollAdditionalProps = {
   onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
 
+const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
+
 const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
   const {
@@ -144,10 +146,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'parent-height': parentHeight,
     'simultaneous-handlers': originSimultaneousHandlers,
     'wait-for': waitFor,
+    'enable-sticky': enableSticky,
     'scroll-event-throttle': scrollEventThrottle = 0,
     __selectRef
   } = props
 
+  const scrollOffset = useRef(new RNAnimated.Value(0)).current
+
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
@@ -216,14 +221,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+
   const contextValue = useMemo(() => {
     return {
-      gestureRef: scrollViewRef
+      gestureRef: scrollViewRef,
+      scrollOffset
     }
   }, [])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
-
   const hasRefresherLayoutRef = useRef(false)
 
   // layout 完成前先隐藏，避免安卓闪烁问题
@@ -485,6 +491,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateIntersection()
   }
 
+  const scrollHandler = RNAnimated.event(
+    [{ nativeEvent: { contentOffset: { y: scrollOffset } } }],
+    {
+      useNativeDriver: true,
+      listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        onScroll(event)
+      }
+    }
+  )
+
   function onScrollDragStart (e: NativeSyntheticEvent<NativeScrollEvent>) {
     hasCallScrollToLower.current = false
     hasCallScrollToUpper.current = false
@@ -655,7 +671,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
       bounces: false,
       ref: scrollViewRef,
-      onScroll: onScroll,
+      onScroll: enableSticky ? scrollHandler : onScroll,
       onContentSizeChange: onContentSizeChange,
       bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -704,11 +720,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'bindrefresherrefresh'
   ], { layoutRef })
 
+  const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView
+
   const withRefresherScrollView = createElement(
     GestureDetector,
     { gesture: panGesture },
     createElement(
-      ScrollView,
+      ScrollViewComponent,
       innerProps,
       createElement(
         Animated.View,
@@ -736,8 +754,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   )
 
   const commonScrollView = createElement(
-    ScrollView,
-    extendObject(innerProps, {
+    ScrollViewComponent,
+    extendObject({}, innerProps, {
       refreshControl: refresherEnabled
         ? createElement(RefreshControl, extendObject({
           progressBackgroundColor: refresherBackground,

package/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
+import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent } from 'react-native'
+import { ScrollViewContext, StickyContext } from './context'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import { error } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+
+interface StickyHeaderProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  padding?: [number, number, number, number];
+  'offset-top'?: number;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
+}
+
+const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
+  const {
+    style,
+    bindstickontopchange,
+    padding = [0, 0, 0, 0],
+    'offset-top': offsetTop = 0,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const scrollViewContext = useContext(ScrollViewContext)
+  const stickyContext = useContext(StickyContext)
+  const { scrollOffset } = scrollViewContext
+  const { registerStickyHeader, unregisterStickyHeader } = stickyContext
+  const headerRef = useRef<View>(null)
+  const isStickOnTopRef = useRef(false)
+  const id = useId()
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  const headerTopAnimated = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    registerStickyHeader({ key: id, updatePosition })
+    return () => {
+      unregisterStickyHeader(id)
+    }
+  }, [])
+
+  function updatePosition () {
+    if (headerRef.current) {
+      const scrollViewRef = scrollViewContext.gestureRef
+      if (scrollViewRef && scrollViewRef.current) {
+        headerRef.current.measureLayout(
+          scrollViewRef.current,
+          (left: number, top: number) => {
+            Animated.timing(headerTopAnimated, {
+              toValue: top,
+              duration: 0,
+              useNativeDriver: true
+            }).start()
+          }
+        )
+      } else {
+        error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference')
+      }
+    }
+  }
+
+  function onLayout (e: LayoutChangeEvent) {
+    updatePosition()
+  }
+
+  useNodesRef(props, ref, headerRef, {
+    style: normalStyle
+  })
+
+  useEffect(() => {
+    if (!bindstickontopchange) return
+
+    const listener = scrollOffset.addListener((state: { value: number }) => {
+      const currentScrollValue = state.value
+      const newIsStickOnTop = currentScrollValue > (headerTopAnimated as any)._value
+      if (newIsStickOnTop !== isStickOnTopRef.current) {
+        isStickOnTopRef.current = newIsStickOnTop
+        bindstickontopchange(
+          getCustomEvent('stickontopchange', {}, {
+            detail: {
+              isStickOnTop: newIsStickOnTop
+            },
+            layoutRef
+          }, props))
+      }
+    })
+
+    return () => {
+      scrollOffset.removeListener(listener)
+    }
+  }, [])
+
+  const animatedStyle = useMemo(() => {
+    const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'extend'
+    })
+
+    const finalTranslateY = offsetTop === 0
+      ? translateY
+      : Animated.add(
+        translateY,
+        Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, offsetTop],
+          extrapolate: 'clamp'
+        })
+      )
+
+    return {
+      transform: [{ translateY: finalTranslateY }]
+    }
+  }, [scrollOffset, headerTopAnimated, offsetTop])
+
+  const innerProps = useInnerProps(props, extendObject({}, {
+    ref: headerRef,
+    style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+      paddingTop: padding[0] || 0,
+      paddingRight: padding[1] || 0,
+      paddingBottom: padding[2] || 0,
+      paddingLeft: padding[3] || 0
+    })
+  }, layoutProps), [], { layoutRef })
+
+  return (
+    createElement(
+      Animated.View,
+      innerProps,
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
+  )
+})
+
+const styles = StyleSheet.create({
+  content: {
+    width: '100%',
+    zIndex: 10
+  }
+})
+
+_StickyHeader.displayName = 'MpxStickyHeader'
+export default _StickyHeader

package/lib/runtime/components/react/mpx-sticky-section.tsx

@@ -0,0 +1,96 @@
+
+import { useRef, forwardRef, createElement, ReactNode, useCallback, useMemo } from 'react'
+import { View, ViewStyle } from 'react-native'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import { StickyContext } from './context'
+import useInnerProps from './getInnerListeners'
+
+interface StickySectionProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  'offset-top'?: number;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+}
+
+const _StickySection = forwardRef<HandlerRef<View, StickySectionProps>, StickySectionProps>((stickySectionProps: StickySectionProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickySectionProps)
+  const {
+    style,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+  const sectionRef = useRef<View>(null)
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  const stickyHeaders = useRef<Map<string, any>>(new Map())
+
+  const registerStickyHeader = useCallback((item: { id: string, updatePosition: Function }) => {
+    stickyHeaders.current.set(item.id, item)
+  }, [])
+
+  const unregisterStickyHeader = useCallback((id: string) => {
+    stickyHeaders.current.delete(id)
+  }, [])
+
+  const contextValue = useMemo(() => ({
+    registerStickyHeader,
+    unregisterStickyHeader
+  }), [])
+
+  useNodesRef(props, ref, sectionRef, {
+    style: normalStyle
+  })
+
+  function onLayout () {
+    stickyHeaders.current.forEach(item => {
+      item.updatePosition()
+    })
+  }
+
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject(innerStyle, layoutStyle),
+    ref: sectionRef
+  }, layoutProps), [], { layoutRef })
+
+  return (
+    createElement(
+      View,
+      innerProps,
+      createElement(
+        StickyContext.Provider,
+        { value: contextValue },
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )
+      ))
+  )
+})
+
+_StickySection.displayName = 'MpxStickySection'
+export default _StickySection

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

@@ -533,7 +533,18 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
           const { y: navigationY = 0 } = navigation?.layout || {}
-          layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY }
+          layoutRef.current = {
+            x,
+            y: y - navigationY,
+            width,
+            height,
+            offsetLeft,
+            offsetTop: offsetTop - navigationY,
+            _x: x,
+            _y: y,
+            _offsetLeft: offsetLeft,
+            _offsetTop: offsetTop
+          }
         })
       }
       onLayout && onLayout(e)

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -44,6 +44,7 @@
       enhanced: Boolean,
       refresherEnabled: Boolean,
       refresherTriggered: Boolean,
+      enableSticky: Boolean,
       refresherThreshold: {
         type: Number,
         default: 45
@@ -57,6 +58,16 @@
         default: ''
       }
     },
+    provide () {
+      return {
+        scrollOffset: {
+          get: () => this.lastY
+        },
+        refreshVersion: {
+          get: () => this.refreshVersion
+        }
+      }
+    },
     data () {
       return {
         isLoading: false,
@@ -68,7 +79,8 @@
         lastContentWidth: 0,
         lastContentHeight: 0,
         lastWrapperWidth: 0,
-        lastWrapperHeight: 0
+        lastWrapperHeight: 0,
+        refreshVersion: 0
       }
     },
     computed: {
@@ -222,6 +234,9 @@
             stop: 56
           }
         }
+        if(this.enableSticky) {
+          originBsOptions.useTransition = false
+        }
         const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions, { observeDOM: false })
         this.bs = new BScroll(this.$refs.wrapper, bsOptions)
         this.lastX = -this.currentX
@@ -251,7 +266,7 @@
           }
           this.lastX = x
           this.lastY = y
-        }, 30, {
+        }, this.enableSticky ? 0 : 30, {
           leading: true,
           trailing: true
         }))
@@ -327,6 +342,7 @@
         const scrollWrapperHeight = wrapper?.clientHeight || 0
         if (wrapper) {
           const computedStyle = getComputedStyle(wrapper)
+          this.refreshVersion = this.refreshVersion + 1
           // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
           // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
           this.$refs.innerWrapper.style.width = `${scrollWrapperWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
@@ -458,7 +474,8 @@
       }
 
       const innerWrapper = createElement('div', {
-        ref: 'innerWrapper'
+        ref: 'innerWrapper',
+        class: 'mpx-inner-wrapper'
       }, this.$slots.default)
 
       const pullDownContent = this.refresherDefaultStyle !== 'none' ? createElement('div', {
@@ -568,4 +585,4 @@
               background: rgba(255, 255, 255, .7)
             100%
               background: rgba(255, 255, 255, .3)
-</style>
+</style>

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -0,0 +1,91 @@
+<script>
+import { warn } from '@mpxjs/utils'
+import { getCustomEvent } from './getInnerListeners'
+
+  export default {
+    name: 'mpx-sticky-header',
+    inject: ['scrollOffset', 'refreshVersion'],
+    props: {
+      'offsetTop': {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        headerTop: 0,
+        isStickOnTop: false
+      }
+    },
+    computed: {
+      _scrollOffset() {
+        return -this.scrollOffset?.get() || 0
+      },
+      _refreshVersion() {
+        return this.refreshVersion?.get() || 0
+      }
+    },
+    watch: {
+      _scrollOffset: {
+        handler(newScrollOffset) {
+          const newIsStickOnTop = newScrollOffset > this.headerTop
+          if (newIsStickOnTop !== this.isStickOnTop) {
+            this.isStickOnTop = newIsStickOnTop
+            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+              isStickOnTop: newIsStickOnTop
+            }, this))
+          }
+          const stickyHeader = this.$refs.stickyHeader
+          if (!stickyHeader) return
+          if (this.isStickOnTop) {
+            stickyHeader.style.transform = `translateY(${newScrollOffset - this.headerTop + this.offsetTop}px)`
+          } else {
+            stickyHeader.style.transform = 'none'
+          }
+        },
+        immediate: true
+      },
+      _refreshVersion: {
+        handler() {
+          const parentElement = this.$el.parentElement
+          if (!parentElement) return
+          
+          const parentClass = parentElement.className || ''
+          const isStickySection = /mpx-sticky-section/.test(parentClass)
+          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
+          
+          if (!isStickySection && !isScrollViewWrapper) {
+            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
+            return
+          }
+          
+          this.headerTop = isStickySection 
+            ? this.$el.offsetTop + parentElement.offsetTop
+            : this.$el.offsetTop
+          
+          const stickyHeader = this.$refs.stickyHeader
+          if (!stickyHeader) return
+          
+          if (this._scrollOffset > this.headerTop) {
+            stickyHeader.style.transform = `translateY(${this._scrollOffset - this.headerTop + this.offsetTop}px)`
+          } else {
+            stickyHeader.style.transform = 'none'
+          }
+        },
+      }
+    },
+    render(h) {
+      const style = {
+        width: '100%',
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 10
+      }
+
+      return h('div', {
+        style,
+        ref: 'stickyHeader'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/components/web/mpx-sticky-section.vue

@@ -0,0 +1,15 @@
+<script>
+  export default {
+    name: 'mpx-sticky-section',
+    render(h) {
+      const style = {
+        position: 'relative'
+      }
+
+      return h('div', {
+        style,
+        class: 'mpx-sticky-section'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/package.json

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