@mpxjs/webpack-plugin 2.10.18-beta.11 → 2.10.18-beta.13

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

@@ -42,8 +42,6 @@ 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 }) {
   /**
@@ -127,8 +125,6 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print }),
-    stickyHeader({ print }),
-    stickySection({ print })
+    rootPortal({ print })
   ]
 }

package/lib/react/style-helper.js

@@ -135,27 +135,18 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          let _default = classMap[key]?._default
-          let _media = classMap[key]?._media
+          // set css defalut value
+          const val = classMap[key] || {}
+          classMap[key] = Object.assign(val, classMapValue)
+
+          // set css media
           if (isMedia) {
-            // 当前是媒体查询
-            _default = _default || {}
-            _media = _media || []
+            const _media = classMap[key]?._media || []
             _media.push({
               options,
               value: classMapValue
             })
-            classMap[key] = {
-              _media,
-              _default
-            }
-          } else if (_default) {
-            // 已有媒体查询数据，此次非媒体查询
-            Object.assign(_default, classMapValue)
-          } else {
-            // 无媒体查询
-            const val = classMap[key] || {}
-            classMap[key] = Object.assign(val, classMapValue)
+            classMap[key]._media = _media
           }
         }
       })

package/lib/runtime/components/ali/mpx-section-list.mpx

@@ -152,7 +152,7 @@
       },
       pollingDuration: {
         type: Number,
-        value: 3000
+        value: 300
       },
       useListHeader: {
         type: Boolean,

package/lib/runtime/components/extends/section-list.mpx

@@ -0,0 +1 @@
+<!-- section-list 占位文件-->

package/lib/runtime/components/extends/sticky-heder.mpx

@@ -0,0 +1 @@
+<!-- sticky-header 占位文件-->

package/lib/runtime/components/extends/sticky-section.mpx

@@ -0,0 +1 @@
+<!-- sticky-section 占位文件-->

package/lib/runtime/components/react/animationHooks/useTransitionHooks.ts

@@ -144,7 +144,7 @@ function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
   const transitionMap = transitionData.reduce((acc, cur) => {
     // hasOwn(transitionSupportedProperty, dash2hump(val)) || val === Transform
     const { property = '', duration = 0, delay = 0, easing = Easing.inOut(Easing.ease) } = cur
-    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration > 0) {
+    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration >= 0) {
       acc[property] = {
         duration,
         delay,
@@ -157,17 +157,59 @@ function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
   return transitionMap
 }
 
+const transitionKeys = ['transition', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty'] as const
+
+function getTransitionPropertyKeys (map: TransitionMap): string {
+  return Object.keys(map).sort().join(',')
+}
+
 export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType) {
   // console.log(`useTransitionHooks, props=`, props)
   const { style: originalStyle = {}, transitionend } = props
   // style变更标识(首次render不执行)，初始值为0，首次渲染后为1
   const animationDeps = useRef(0)
-  // 记录上次style map
-  // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
-  // ** 从 style 中获取动画数据
+  // transition 时序属性动态更新追踪
+  const transitionMapVersionRef = useRef(0)
+  const lastTransitionStyleRef = useRef<Record<string, any>>(
+    transitionKeys.reduce((acc, key) => { acc[key] = originalStyle[key]; return acc }, {} as Record<string, any>)
+  )
+  const initialPropertyKeysRef = useRef('')
+  const prevTransitionMapRef = useRef<TransitionMap>({})
+  // 检测 transition 时序属性变化，返回版本号驱动 transitionMap 重新计算
+  const transitionMapVersion = useMemo(() => {
+    const prevStyle = lastTransitionStyleRef.current
+    const hasChanged = transitionKeys.some(key => prevStyle[key] !== originalStyle[key])
+    if (hasChanged) {
+      transitionKeys.forEach(key => { lastTransitionStyleRef.current[key] = originalStyle[key] })
+      transitionMapVersionRef.current++
+    }
+    return transitionMapVersionRef.current
+  }, [originalStyle])
+  // ** 从 style 中获取动画数据(支持动态更新 transitionDuration/transitionDelay/transitionTimingFunction)
   const transitionMap = useMemo(() => {
-    return parseTransitionStyle(originalStyle)
-  }, [])
+    const newTransitionMap = parseTransitionStyle(originalStyle)
+    const newPropertyKeys = getTransitionPropertyKeys(newTransitionMap)
+    if (!initialPropertyKeysRef.current) {
+      // 首次计算，记录初始属性集合
+      initialPropertyKeysRef.current = newPropertyKeys
+      prevTransitionMapRef.current = newTransitionMap
+      return newTransitionMap
+    }
+    // 检测 transitionProperty 是否变化
+    if (newPropertyKeys !== initialPropertyKeysRef.current) {
+      error('[Mpx runtime error]: dynamic setting transitionProperty is not supported')
+      // 保留初始属性集合，仅更新已有属性的时序
+      const prevMap = prevTransitionMapRef.current
+      const result = Object.keys(prevMap).reduce((map, property) => {
+        map[property] = newTransitionMap[property] || prevMap[property]
+        return map
+      }, {} as TransitionMap)
+      prevTransitionMapRef.current = result
+      return result
+    }
+    prevTransitionMapRef.current = newTransitionMap
+    return newTransitionMap
+  }, [transitionMapVersion])
   // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
   const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
     // 记录需要执行动画的 propName

package/lib/runtime/components/react/dist/animationHooks/useTransitionHooks.js

@@ -117,7 +117,7 @@ function parseTransitionStyle(originalStyle) {
     const transitionMap = transitionData.reduce((acc, cur) => {
         // hasOwn(transitionSupportedProperty, dash2hump(val)) || val === Transform
         const { property = '', duration = 0, delay = 0, easing = Easing.inOut(Easing.ease) } = cur;
-        if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration > 0) {
+        if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration >= 0) {
             acc[property] = {
                 duration,
                 delay,
@@ -129,17 +129,55 @@ function parseTransitionStyle(originalStyle) {
     // console.log(`parseTransitionStyle transitionMap=`, transitionMap)
     return transitionMap;
 }
+const transitionKeys = ['transition', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty'];
+function getTransitionPropertyKeys(map) {
+    return Object.keys(map).sort().join(',');
+}
 export default function useTransitionHooks(props) {
     // console.log(`useTransitionHooks, props=`, props)
     const { style: originalStyle = {}, transitionend } = props;
     // style变更标识(首次render不执行)，初始值为0，首次渲染后为1
     const animationDeps = useRef(0);
-    // 记录上次style map
-    // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
-    // ** 从 style 中获取动画数据
+    // transition 时序属性动态更新追踪
+    const transitionMapVersionRef = useRef(0);
+    const lastTransitionStyleRef = useRef(transitionKeys.reduce((acc, key) => { acc[key] = originalStyle[key]; return acc; }, {}));
+    const initialPropertyKeysRef = useRef('');
+    const prevTransitionMapRef = useRef({});
+    // 检测 transition 时序属性变化，返回版本号驱动 transitionMap 重新计算
+    const transitionMapVersion = useMemo(() => {
+        const prevStyle = lastTransitionStyleRef.current;
+        const hasChanged = transitionKeys.some(key => prevStyle[key] !== originalStyle[key]);
+        if (hasChanged) {
+            transitionKeys.forEach(key => { lastTransitionStyleRef.current[key] = originalStyle[key]; });
+            transitionMapVersionRef.current++;
+        }
+        return transitionMapVersionRef.current;
+    }, [originalStyle]);
+    // ** 从 style 中获取动画数据(支持动态更新 transitionDuration/transitionDelay/transitionTimingFunction)
     const transitionMap = useMemo(() => {
-        return parseTransitionStyle(originalStyle);
-    }, []);
+        const newTransitionMap = parseTransitionStyle(originalStyle);
+        const newPropertyKeys = getTransitionPropertyKeys(newTransitionMap);
+        if (!initialPropertyKeysRef.current) {
+            // 首次计算，记录初始属性集合
+            initialPropertyKeysRef.current = newPropertyKeys;
+            prevTransitionMapRef.current = newTransitionMap;
+            return newTransitionMap;
+        }
+        // 检测 transitionProperty 是否变化
+        if (newPropertyKeys !== initialPropertyKeysRef.current) {
+            error('[Mpx runtime error]: dynamic setting transitionProperty is not supported');
+            // 保留初始属性集合，仅更新已有属性的时序
+            const prevMap = prevTransitionMapRef.current;
+            const result = Object.keys(prevMap).reduce((map, property) => {
+                map[property] = newTransitionMap[property] || prevMap[property];
+                return map;
+            }, {});
+            prevTransitionMapRef.current = result;
+            return result;
+        }
+        prevTransitionMapRef.current = newTransitionMap;
+        return newTransitionMap;
+    }, [transitionMapVersion]);
     // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
     const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
         // 记录需要执行动画的 propName

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

@@ -40,7 +40,7 @@
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -285,11 +285,6 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [isAutoFocus]);
-    // 使用 multiline 来修复光标位置问题
-    // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
-    // 这个问题只在 Android 上出现
-    // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-    const needMultilineFix = isAndroid && !multiline;
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -308,7 +303,7 @@ const Input = forwardRef((props, ref) => {
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline: !!multiline,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -317,7 +312,7 @@ const Input = forwardRef((props, ref) => {
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
-    }, needMultilineFix ? { numberOfLines: 1 } : {}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',
         'placeholder-style',

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

@@ -73,6 +73,15 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             clearTimerScrollTo();
         };
     }, []);
+    // `contentOffset` prop sets visual position but does not fire scroll events,
+    // so `offsetYShared` (from `useScrollViewOffset`) stays at 0 until the user scrolls.
+    // Directly sync it whenever `itemRawH` is established so wheel animation renders correctly.
+    useEffect(() => {
+        if (!itemRawH || dragging.current || scrolling.current) {
+            return;
+        }
+        offsetYShared.value = activeIndex.current * itemRawH;
+    }, [itemRawH]);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||

package/lib/runtime/components/react/dist/mpx-section-list.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
+import { GestureHandler } from './utils';
 interface ListItem {
     isSectionHeader?: boolean;
     _originalItemIndex?: number;
@@ -39,10 +40,12 @@ interface SectionListProps {
     'refresher-enabled'?: boolean;
     'show-scrollbar'?: boolean;
     'refresher-triggered'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
     bindrefresherrefresh?: (event: any) => void;
     bindscrolltolower?: (event: any) => void;
     bindscroll?: (event: any) => void;
     [key: string]: any;
 }
-declare const _SectionList: React.ForwardRefExoticComponent<Omit<SectionListProps, "ref"> & React.RefAttributes<any>>;
+declare const _SectionList: import("react").ForwardRefExoticComponent<Omit<SectionListProps, "ref"> & import("react").RefAttributes<any>>;
 export default _SectionList;

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

@@ -1,7 +1,8 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react';
 import { SectionList, RefreshControl } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import { extendObject, useLayout, useTransformStyle } from './utils';
+import { extendObject, useLayout, useTransformStyle, flatGesture } from './utils';
 const getGeneric = (generichash, generickey) => {
     if (!generichash || !generickey)
         return null;
@@ -15,9 +16,10 @@ const getGeneric = (generichash, generickey) => {
     }));
 };
 const _SectionList = forwardRef((props = {}, ref) => {
-    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, listFooterData = null, useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered } = props;
+    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, listFooterData = null, useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor } = props;
     const [refreshing, setRefreshing] = useState(!!refresherTriggered);
     const scrollViewRef = useRef(null);
+    const sectionListGestureRef = useRef();
     const indexMap = useRef({});
     const reverseIndexMap = useRef({});
     const { hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
@@ -176,13 +178,13 @@ const _SectionList = forwardRef((props = {}, ref) => {
             offset += headerHeight;
             // 添加该 section 中所有 items 的位置信息
             section.data.forEach((item, itemIndex) => {
-                const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
                 layouts.push({
-                    length: contenteight,
+                    length: contentHeight,
                     offset,
                     index: layouts.length
                 });
-                offset += contenteight;
+                offset += contentHeight;
             });
             // 添加该 section 尾部位置信息
             // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
@@ -210,21 +212,33 @@ const _SectionList = forwardRef((props = {}, ref) => {
         onScroll: onScroll,
         onEndReached: onEndReached
     }, layoutProps);
+    const nativeGesture = useMemo(() => {
+        const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+        const waitForHandlers = flatGesture(waitFor);
+        const gesture = Gesture.Native().withRef(sectionListGestureRef);
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesture.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesture.requireExternalGestureToFail(...waitForHandlers);
+        }
+        return gesture;
+    }, [originSimultaneousHandlers, waitFor]);
     if (enhanced) {
-        Object.assign(scrollAdditionalProps, {
+        extendObject(scrollAdditionalProps, {
             bounces
         });
     }
     if (refresherEnabled) {
-        Object.assign(scrollAdditionalProps, {
+        extendObject(scrollAdditionalProps, {
             refreshing: refreshing
         });
     }
     useImperativeHandle(ref, () => {
-        return {
-            ...props,
+        return extendObject({}, props, {
+            gestureRef: sectionListGestureRef,
             scrollToIndex
-        };
+        });
     });
     const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
         'id',
@@ -232,7 +246,9 @@ const _SectionList = forwardRef((props = {}, ref) => {
         'lower-threshold',
         'refresher-triggered',
         'refresher-enabled',
-        'bindrefresherrefresh'
+        'bindrefresherrefresh',
+        'simultaneous-handlers',
+        'wait-for'
     ], { layoutRef });
     // 使用 ref 保存最新的数据，避免数据变化时组件销毁重建
     const listHeaderDataRef = useRef(listHeaderData);
@@ -272,7 +288,7 @@ const _SectionList = forwardRef((props = {}, ref) => {
             return null;
         return () => createElement(ListFooterGenericComponent, { listFooterData: listFooterDataRef.current });
     }, [useListFooter, generichash, genericListFooter]);
-    return createElement(SectionList, extendObject({
+    return createElement(GestureDetector, { gesture: nativeGesture }, createElement(SectionList, extendObject({
         style: [{ height, width }, style, layoutStyle],
         sections: convertedListData,
         renderItem: renderItem,
@@ -281,12 +297,12 @@ const _SectionList = forwardRef((props = {}, ref) => {
         ListFooterComponent: useListFooter ? ListFooterComponent : null,
         renderSectionHeader: renderSectionHeader,
         refreshControl: refresherEnabled
-            ? React.createElement(RefreshControl, {
+            ? createElement(RefreshControl, {
                 onRefresh: onRefresh,
                 refreshing: refreshing
             })
             : undefined
-    }, innerProps));
+    }, innerProps)));
 });
 _SectionList.displayName = 'MpxSectionList';
 export default _SectionList;

package/lib/runtime/components/react/dist/mpx-swiper.d.ts

@@ -58,6 +58,7 @@ interface SwiperProps {
     disableGesture?: boolean;
     'display-multiple-items'?: number;
     bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindchangestart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
 export default SwiperWrapper;

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

@@ -61,7 +61,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange, bindchangestart } = props;
     const dotCommonStyle = {
         width: dotWidth,
         height: dotHeight,
@@ -300,6 +300,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 nextIndex += 1;
                 // targetOffset = -nextIndex * step.value - preMarginShared.value
                 targetOffset = -nextIndex * step.value;
+                runOnJSCallback('handleSwiperChangeStart', nextIndex);
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
@@ -314,6 +315,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     nextIndex = 0;
                     targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value;
                     // 执行动画到下一帧
+                    runOnJSCallback('handleSwiperChangeStart', nextIndex);
                     offset.value = withTiming(targetOffset, {
                         duration: easeDuration
                     }, () => {
@@ -328,6 +330,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     nextIndex = currentIndex.value + 1;
                     targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value;
                     // 执行动画到下一帧
+                    runOnJSCallback('handleSwiperChangeStart', nextIndex);
                     offset.value = withTiming(targetOffset, {
                         duration: easeDuration,
                         easing: easeMap[easeingFunc]
@@ -362,11 +365,16 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
         bindchange && bindchange(eventData);
     }
+    function handleSwiperChangeStart(current) {
+        const eventData = getCustomEvent('changestart', {}, { detail: { current }, layoutRef: layoutRef });
+        bindchangestart && bindchangestart(eventData);
+    }
     const runOnJSCallbackRef = useRef({
         loop,
         pauseLoop,
         resumeLoop,
-        handleSwiperChange
+        handleSwiperChange,
+        handleSwiperChangeStart
     });
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     function getOffset(index, stepValue) {
@@ -387,6 +395,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         if (targetOffset !== offset.value) {
             // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
             if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
+                runOnJSCallback('handleSwiperChangeStart', propCurrent);
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
@@ -686,7 +695,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const offsetHalf = computeHalf();
             if (childrenLength.value > 1 && offsetHalf) {
                 const { selectedIndex } = getTargetPosition({ transdir: moveDistance });
-                currentIndex.value = selectedIndex;
+                if (selectedIndex !== currentIndex.value) {
+                    currentIndex.value = selectedIndex;
+                    runOnJS(runOnJSCallback)('handleSwiperChangeStart', selectedIndex);
+                }
             }
             // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
             if (!circularShared.value) {

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

@@ -285,7 +285,7 @@ export function parseValues(str, char = ' ') {
 function parseTransform(transformStr) {
     const values = parseValues(transformStr);
     // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-    values.sort();
+    // values.sort()
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\((.+)\)/);

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

@@ -1,7 +1,8 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, useCallback, memo } from 'react'
+import { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react'
 import { SectionList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import { extendObject, useLayout, useTransformStyle } from './utils'
+import { extendObject, useLayout, useTransformStyle, GestureHandler, flatGesture } from './utils'
 interface ListItem {
   isSectionHeader?: boolean;
   _originalItemIndex?: number;
@@ -51,6 +52,8 @@ interface SectionListProps {
   'refresher-enabled'?: boolean;
   'show-scrollbar'?: boolean;
   'refresher-triggered'?: boolean;
+  'wait-for'?: Array<GestureHandler>;
+  'simultaneous-handlers'?: Array<GestureHandler>;
   bindrefresherrefresh?: (event: any) => void;
   bindscrolltolower?: (event: any) => void;
   bindscroll?: (event: any) => void;
@@ -107,12 +110,16 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
     'end-reached-threshold': onEndReachedThreshold = 0.1,
     'refresher-enabled': refresherEnabled,
     'show-scrollbar': showScrollbar = true,
-    'refresher-triggered': refresherTriggered
+    'refresher-triggered': refresherTriggered,
+    'simultaneous-handlers': originSimultaneousHandlers,
+    'wait-for': waitFor
   } = props
 
   const [refreshing, setRefreshing] = useState(!!refresherTriggered)
 
   const scrollViewRef = useRef<any>(null)
+  const sectionListGestureRef = useRef<any>()
+
 
   const indexMap = useRef<{ [key: string]: string | number }>({})
 
@@ -295,13 +302,13 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
 
       // 添加该 section 中所有 items 的位置信息
       section.data.forEach((item: ListItem, itemIndex: number) => {
-        const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
+        const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
         layouts.push({
-          length: contenteight,
+          length: contentHeight,
           offset,
           index: layouts.length
         })
-        offset += contenteight
+        offset += contentHeight
       })
 
       // 添加该 section 尾部位置信息
@@ -335,22 +342,35 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
     layoutProps
   )
 
+  const nativeGesture = useMemo(() => {
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
+    const waitForHandlers = flatGesture(waitFor)
+    const gesture = Gesture.Native().withRef(sectionListGestureRef as any)
+    if (simultaneousHandlers && simultaneousHandlers.length) {
+      gesture.simultaneousWithExternalGesture(...simultaneousHandlers)
+    }
+    if (waitForHandlers && waitForHandlers.length) {
+      gesture.requireExternalGestureToFail(...waitForHandlers)
+    }
+    return gesture
+  }, [originSimultaneousHandlers, waitFor])
+
   if (enhanced) {
-    Object.assign(scrollAdditionalProps, {
+    extendObject(scrollAdditionalProps, {
       bounces
     })
   }
   if (refresherEnabled) {
-    Object.assign(scrollAdditionalProps, {
+    extendObject(scrollAdditionalProps, {
       refreshing: refreshing
     })
   }
 
   useImperativeHandle(ref, () => {
-    return {
-      ...props,
+    return extendObject({}, props, {
+      gestureRef: sectionListGestureRef,
       scrollToIndex
-    }
+    })
   })
 
   const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
@@ -359,7 +379,9 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
     'lower-threshold',
     'refresher-triggered',
     'refresher-enabled',
-    'bindrefresherrefresh'
+    'bindrefresherrefresh',
+    'simultaneous-handlers',
+    'wait-for'
   ], { layoutRef })
 
   // 使用 ref 保存最新的数据，避免数据变化时组件销毁重建
@@ -412,24 +434,28 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
   )
 
   return createElement(
-    SectionList,
-    extendObject(
-      {
-        style: [{ height, width }, style, layoutStyle],
-        sections: convertedListData,
-        renderItem: renderItem,
-        getItemLayout: getItemLayout,
-        ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
-        ListFooterComponent: useListFooter ? ListFooterComponent : null,
-        renderSectionHeader: renderSectionHeader,
-        refreshControl: refresherEnabled
-          ? React.createElement(RefreshControl, {
-            onRefresh: onRefresh,
-            refreshing: refreshing
-          })
-          : undefined
-      },
-      innerProps
+    GestureDetector,
+    { gesture: nativeGesture },
+    createElement(
+      SectionList,
+      extendObject(
+        {
+          style: [{ height, width }, style, layoutStyle],
+          sections: convertedListData,
+          renderItem: renderItem,
+          getItemLayout: getItemLayout,
+          ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+          ListFooterComponent: useListFooter ? ListFooterComponent : null,
+          renderSectionHeader: renderSectionHeader,
+          refreshControl: refresherEnabled
+            ? createElement(RefreshControl, {
+              onRefresh: onRefresh,
+              refreshing: refreshing
+            })
+            : undefined
+        },
+        innerProps
+      )
     )
   )
 })

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

@@ -140,7 +140,7 @@ export default {
     },
     useListHeader: {
       type: Boolean,
-      default: true
+      default: false
     },
     listFooterData: {
       type: Object,

package/package.json

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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'
-    }
-  }
-}