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

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

@@ -1,7 +1,7 @@
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, runOnUI, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
-import React, { forwardRef, useRef, useEffect } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
+import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
@@ -63,21 +63,17 @@ const activeDotStyle = {
 };
 const longPressRatio = 100;
 const easeMap = {
-    default: Easing.linear,
+    default: Easing.inOut(Easing.poly(3)),
     linear: Easing.linear,
     easeInCubic: Easing.in(Easing.cubic),
     easeOutCubic: Easing.out(Easing.cubic),
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {} } = props;
-    const previousMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0;
-    const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0;
+    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
-    // 默认前后补位的元素个数
-    const patchElementNum = props.circular ? (previousMargin ? 2 : 1) : 0;
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {});
     // 计算transfrom之类的
@@ -90,21 +86,31 @@ const SwiperWrapper = forwardRef((props, ref) => {
     });
     const { textStyle } = splitStyle(normalStyle);
     const { textProps } = splitProps(props);
+    const preMargin = props['previous-margin'] ? global.__formatValue(props['previous-margin']) : 0;
+    const nextMargin = props['next-margin'] ? global.__formatValue(props['next-margin']) : 0;
+    const preMarginShared = useSharedValue(preMargin);
+    const nextMarginShared = useSharedValue(nextMargin);
+    const autoplayShared = useSharedValue(autoplay);
+    // 默认前后补位的元素个数
+    const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
+    const patchElmNumShared = useSharedValue(patchElmNum);
+    const circularShared = useSharedValue(circular);
     const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
-    const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - previousMargin - nextMargin : normalStyle.width;
-    const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - previousMargin - nextMargin : normalStyle.height;
-    const dir = useSharedValue(horizontal === false ? 'y' : 'x');
-    const pstep = dir.value === 'x' ? initWidth : initHeight;
+    // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
+    const childrenLength = useSharedValue(children.length);
+    const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width;
+    const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - preMargin - nextMargin : normalStyle.height;
+    const dir = horizontal === false ? 'y' : 'x';
+    const pstep = dir === 'x' ? initWidth : initHeight;
     const initStep = isNaN(pstep) ? 0 : pstep;
-    // 每个元素的宽度 or 高度
+    // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
-    const totalElements = useSharedValue(children.length);
     // 记录选中元素的索引值
-    const currentIndex = useSharedValue(0);
+    const currentIndex = useSharedValue(props.current || 0);
+    // const initOffset = getOffset(props.current || 0, initStep)
     // 记录元素的偏移量
-    const offset = useSharedValue(0);
-    const strAbso = 'absolute' + dir.value.toUpperCase();
-    const arrPages = renderItems();
+    const offset = useSharedValue(getOffset(props.current || 0, initStep));
+    const strAbso = 'absolute' + dir.toUpperCase();
     // 标识手指触摸和抬起, 起点在onBegin
     const touchfinish = useSharedValue(true);
     // 记录上一帧的绝对定位坐标
@@ -114,10 +120,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 记录从onBegin 到 onTouchesUp 的时间
     const moveTime = useSharedValue(0);
     const timerId = useRef(0);
-    // 用户点击未移动状态下,记录用户上一次操作的transtion 的 direction
-    const customTrans = useSharedValue(0);
     const intervalTimer = props.interval || 500;
-    totalElements.value = children.length;
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
@@ -140,22 +143,20 @@ const SwiperWrapper = forwardRef((props, ref) => {
     ], { layoutRef: layoutRef });
     function onWrapperLayout(e) {
         const { width, height } = e.nativeEvent.layout;
-        const realWidth = dir.value === 'x' ? width - previousMargin - nextMargin : width;
-        const realHeight = dir.value === 'y' ? height - previousMargin - nextMargin : height;
-        step.value = dir.value === 'x' ? realWidth : realHeight;
-        if (touchfinish.value) {
-            runOnUI(() => {
-                offset.value = getOffset(currentIndex.value);
-            })();
-            pauseLoop();
-            resumeLoop();
+        const realWidth = dir === 'x' ? width - preMargin - nextMargin : width;
+        const realHeight = dir === 'y' ? height - preMargin - nextMargin : height;
+        const iStep = dir === 'x' ? realWidth : realHeight;
+        if (iStep !== step.value) {
+            step.value = iStep;
+            updateCurrent(props.current || 0, iStep);
+            updateAutoplay();
         }
     }
     const dotAnimatedStyle = useAnimatedStyle(() => {
         if (!step.value)
             return {};
         const dotStep = dotCommonStyle.width + dotCommonStyle.marginRight + dotCommonStyle.marginLeft;
-        if (dir.value === 'x') {
+        if (dir === 'x') {
             return { transform: [{ translateX: currentIndex.value * dotStep }] };
         }
         else {
@@ -163,17 +164,17 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     });
     function renderPagination() {
-        if (totalElements.value <= 1)
+        if (children.length <= 1)
             return null;
         const activeColor = activeDotColor || '#007aff';
         const unActionColor = dotColor || 'rgba(0,0,0,.2)';
         // 正常渲染所有dots
         const dots = [];
-        for (let i = 0; i < totalElements.value; i++) {
+        for (let i = 0; i < children.length; i++) {
             dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>);
         }
-        return (<View pointerEvents="none" style={styles['pagination_' + dir.value]}>
-        <View style={[styles['pagerWrapper' + dir.value]]}>
+        return (<View pointerEvents="none" style={styles['pagination_' + dir]}>
+        <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
                 dotCommonStyle,
                 activeDotStyle,
@@ -190,87 +191,62 @@ const SwiperWrapper = forwardRef((props, ref) => {
     </View>);
     }
     function renderItems() {
-        const itemAnimatedStyles = useAnimatedStyle(() => {
-            return dir.value === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value };
-        });
+        const intLen = children.length;
         let renderChild = children.slice();
-        if (props.circular && totalElements.value > 1) {
+        if (circular && intLen > 1) {
             // 最前面加最后一个元素
-            const lastChild = React.cloneElement(children[totalElements.value - 1]);
+            const lastChild = React.cloneElement(children[intLen - 1], { key: 'clone0' });
             // 最后面加第一个元素
-            const firstChild = React.cloneElement(children[0]);
-            if (previousMargin) {
-                const lastChild1 = React.cloneElement(children[totalElements.value - 2]);
-                const firstChild1 = React.cloneElement(children[1]);
+            const firstChild = React.cloneElement(children[0], { key: 'clone1' });
+            if (preMargin) {
+                const lastChild1 = React.cloneElement(children[intLen - 2], { key: 'clone2' });
+                const firstChild1 = React.cloneElement(children[1], { key: 'clone3' });
                 renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1]);
             }
             else {
                 renderChild = [lastChild].concat(renderChild).concat([firstChild]);
             }
         }
-        const arrChilds = renderChild.map((child, index) => {
+        const arrChildren = renderChild.map((child, index) => {
             const extraStyle = {};
-            if (index === 0 && !props.circular) {
-                previousMargin && dir.value === 'x' && (extraStyle.marginLeft = previousMargin);
-                previousMargin && dir.value === 'y' && (extraStyle.marginTop = previousMargin);
+            if (index === 0 && !circular) {
+                preMargin && dir === 'x' && (extraStyle.marginLeft = preMargin);
+                preMargin && dir === 'y' && (extraStyle.marginTop = preMargin);
             }
-            if (index === totalElements.value - 1 && !props.circular) {
-                nextMargin && dir.value === 'x' && (extraStyle.marginRight = nextMargin);
-                nextMargin && dir.value === 'y' && (extraStyle.marginBottom = nextMargin);
+            if (index === intLen - 1 && !circular) {
+                nextMargin && dir === 'x' && (extraStyle.marginRight = nextMargin);
+                nextMargin && dir === 'y' && (extraStyle.marginBottom = nextMargin);
             }
+            // 业务swiper-item自己生成key，内部添加的元素自定义key
             const newChild = React.cloneElement(child, {
                 itemIndex: index,
-                customStyle: [itemAnimatedStyles, extraStyle],
-                key: 'page' + index
+                customStyle: extraStyle
             });
             return newChild;
         });
         const contextValue = {
             offset,
             step,
-            scale: props.scale
+            scale: props.scale,
+            dir
         };
-        return (<SwiperContext.Provider value={contextValue}>{arrChilds}</SwiperContext.Provider>);
+        return (<SwiperContext.Provider value={contextValue}>{arrChildren}</SwiperContext.Provider>);
     }
-    function createAutoPlay() {
-        let targetOffset = 0;
-        let nextIndex = currentIndex.value;
-        if (!props.circular) {
-            // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-            if (currentIndex.value === totalElements.value - 1) {
-                pauseLoop();
+    const { loop, pauseLoop, resumeLoop } = useMemo(() => {
+        function createAutoPlay() {
+            if (!step.value)
                 return;
-            }
-            nextIndex += 1;
-            targetOffset = -nextIndex * step.value - previousMargin;
-            offset.value = withTiming(targetOffset, {
-                duration: easeDuration,
-                easing: easeMap[easeingFunc]
-            }, () => {
-                currentIndex.value = nextIndex;
-                runOnJS(loop)();
-            });
-        }
-        else {
-            // 默认向右, 向下
-            if (nextIndex === totalElements.value - 1) {
-                nextIndex = 0;
-                targetOffset = -(totalElements.value + patchElementNum) * step.value + previousMargin;
-                // 执行动画到下一帧
-                offset.value = withTiming(targetOffset, {
-                    duration: easeDuration
-                }, () => {
-                    const initOffset = -step.value * patchElementNum + previousMargin;
-                    // 将开始位置设置为真正的位置
-                    offset.value = initOffset;
-                    currentIndex.value = nextIndex;
-                    runOnJS(loop)();
-                });
-            }
-            else {
-                nextIndex = currentIndex.value + 1;
-                targetOffset = -(nextIndex + patchElementNum) * step.value + previousMargin;
-                // 执行动画到下一帧
+            let targetOffset = 0;
+            let nextIndex = currentIndex.value;
+            if (!circularShared.value) {
+                // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
+                if (currentIndex.value === childrenLength.value - 1) {
+                    pauseLoop();
+                    return;
+                }
+                nextIndex += 1;
+                // targetOffset = -nextIndex * step.value - preMarginShared.value
+                targetOffset = -nextIndex * step.value;
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
@@ -279,297 +255,383 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     runOnJS(loop)();
                 });
             }
+            else {
+                // 默认向右, 向下
+                if (nextIndex === childrenLength.value - 1) {
+                    nextIndex = 0;
+                    targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value;
+                    // 执行动画到下一帧
+                    offset.value = withTiming(targetOffset, {
+                        duration: easeDuration
+                    }, () => {
+                        const initOffset = -step.value * patchElmNumShared.value + preMarginShared.value;
+                        // 将开始位置设置为真正的位置
+                        offset.value = initOffset;
+                        currentIndex.value = nextIndex;
+                        runOnJS(loop)();
+                    });
+                }
+                else {
+                    nextIndex = currentIndex.value + 1;
+                    targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value;
+                    // 执行动画到下一帧
+                    offset.value = withTiming(targetOffset, {
+                        duration: easeDuration,
+                        easing: easeMap[easeingFunc]
+                    }, () => {
+                        currentIndex.value = nextIndex;
+                        runOnJS(loop)();
+                    });
+                }
+            }
         }
-    }
+        // loop在JS线程中调用，createAutoPlay + useEffect中
+        function loop() {
+            timerId.current && clearTimeout(timerId.current);
+            timerId.current = setTimeout(createAutoPlay, intervalTimer);
+        }
+        function pauseLoop() {
+            timerId.current && clearTimeout(timerId.current);
+        }
+        // resumeLoop在worklet中调用
+        function resumeLoop() {
+            if (autoplayShared.value && childrenLength.value > 1) {
+                loop();
+            }
+        }
+        return {
+            loop,
+            pauseLoop,
+            resumeLoop
+        };
+    }, []);
     function handleSwiperChange(current) {
         if (props.current !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
             props.bindchange && props.bindchange(eventData);
         }
     }
-    function getOffset(index) {
-        'worklet';
-        if (!step.value)
+    function getOffset(index, stepValue) {
+        if (!stepValue)
             return 0;
         let targetOffset = 0;
-        if (props.circular && totalElements.value > 1) {
-            const targetIndex = (index || props.current || 0) + patchElementNum;
-            targetOffset = -(step.value * targetIndex - previousMargin);
+        if (circular && children.length > 1) {
+            const targetIndex = index + patchElmNum;
+            targetOffset = -(stepValue * targetIndex - preMargin);
         }
         else {
-            targetOffset = -(index || props?.current || 0) * step.value;
+            targetOffset = -index * stepValue;
         }
         return targetOffset;
     }
-    function loop() {
-        timerId.current = setTimeout(() => {
-            createAutoPlay();
-        }, intervalTimer);
-    }
-    function pauseLoop() {
-        timerId.current && clearTimeout(timerId.current);
+    function updateCurrent(index, stepValue) {
+        const targetOffset = getOffset(index || 0, stepValue);
+        if (targetOffset !== offset.value) {
+            // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
+            if (props.current !== undefined && props.current !== currentIndex.value) {
+                offset.value = withTiming(targetOffset, {
+                    duration: easeDuration,
+                    easing: easeMap[easeingFunc]
+                }, () => {
+                    currentIndex.value = props.current || 0;
+                });
+            }
+            else {
+                offset.value = targetOffset;
+            }
+        }
     }
-    function resumeLoop() {
-        if (props.autoplay) {
+    function updateAutoplay() {
+        if (autoplay && children.length > 1) {
             loop();
         }
+        else {
+            pauseLoop();
+        }
     }
+    // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        const isInit = !preIndex && newIndex === 0;
-        if (!isInit && newIndex !== preIndex && props.bindchange) {
+        if (newIndex !== preIndex && props.bindchange) {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });
     useEffect(() => {
-        if (!step.value) {
-            return;
+        let patchStep = 0;
+        if (preMargin !== preMarginShared.value) {
+            patchStep += preMargin - preMarginShared.value;
         }
-        const targetOffset = getOffset();
-        if (props.current !== undefined && props.current !== currentIndex.value) {
-            offset.value = withTiming(targetOffset, {
-                duration: easeDuration,
-                easing: easeMap[easeingFunc]
-            }, () => {
-                currentIndex.value = props.current || 0;
-            });
+        if (nextMargin !== nextMarginShared.value) {
+            patchStep += nextMargin - nextMarginShared.value;
         }
-    }, [props.current]);
-    useEffect(() => {
-        if (!step.value) {
-            return;
+        preMarginShared.value = preMargin;
+        nextMarginShared.value = nextMargin;
+        const newStep = step.value - patchStep;
+        if (step.value !== newStep) {
+            step.value = newStep;
+            offset.value = getOffset(currentIndex.value, newStep);
         }
-        if (props.autoplay) {
-            resumeLoop();
-        }
-        else {
+    }, [preMargin, nextMargin]);
+    useEffect(() => {
+        childrenLength.value = children.length;
+        if (children.length - 1 < currentIndex.value) {
             pauseLoop();
+            currentIndex.value = 0;
+            offset.value = getOffset(0, step.value);
+            if (autoplay && children.length > 1) {
+                loop();
+            }
         }
+    }, [children.length]);
+    useEffect(() => {
+        updateCurrent(props.current || 0, step.value);
+    }, [props.current]);
+    useEffect(() => {
+        autoplayShared.value = autoplay;
+        updateAutoplay();
         return () => {
-            if (props.autoplay) {
+            if (autoplay) {
                 pauseLoop();
             }
         };
-    }, [props.autoplay]);
-    function getTargetPosition(eventData) {
-        'worklet';
-        // 移动的距离
-        const { translation } = eventData;
-        let resetOffsetPos = 0;
-        let selectedIndex = currentIndex.value;
-        // 是否临界点
-        let isCriticalItem = false;
-        // 真实滚动到的偏移量坐标
-        let moveToTargetPos = 0;
-        // 当前的位置
-        const currentOffset = offset.value - previousMargin;
-        const computedIndex = Math.abs(currentOffset) / step.value;
-        const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
-        // 实际应该定位的索引值
-        if (!props.circular) {
-            selectedIndex = moveToIndex;
-            moveToTargetPos = selectedIndex * step.value;
-        }
-        else {
-            if (moveToIndex >= totalElements.value + patchElementNum) {
-                selectedIndex = moveToIndex - (totalElements.value + patchElementNum);
-                resetOffsetPos = (selectedIndex + patchElementNum) * step.value - previousMargin;
-                moveToTargetPos = moveToIndex * step.value - previousMargin;
-                isCriticalItem = true;
+    }, [autoplay]);
+    useEffect(() => {
+        if (circular !== circularShared.value) {
+            circularShared.value = circular;
+            patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0;
+            offset.value = getOffset(currentIndex.value, step.value);
+        }
+    }, [circular, preMargin]);
+    const { gestureHandler } = useMemo(() => {
+        function getTargetPosition(eventData) {
+            'worklet';
+            // 移动的距离
+            const { translation } = eventData;
+            let resetOffsetPos = 0;
+            let selectedIndex = currentIndex.value;
+            // 是否临界点
+            let isCriticalItem = false;
+            // 真实滚动到的偏移量坐标
+            let moveToTargetPos = 0;
+            const tmp = !circularShared.value ? 0 : preMarginShared.value;
+            const currentOffset = translation < 0 ? offset.value - tmp : offset.value + tmp;
+            const computedIndex = Math.abs(currentOffset) / step.value;
+            const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
+            // 实际应该定位的索引值
+            if (!circularShared.value) {
+                selectedIndex = moveToIndex;
+                moveToTargetPos = selectedIndex * step.value;
+            }
+            else {
+                if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
+                    selectedIndex = moveToIndex - (childrenLength.value + patchElmNumShared.value);
+                    resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value;
+                    moveToTargetPos = moveToIndex * step.value - preMarginShared.value;
+                    isCriticalItem = true;
+                }
+                else if (moveToIndex <= patchElmNumShared.value - 1) {
+                    selectedIndex = moveToIndex === 0 ? childrenLength.value - patchElmNumShared.value : childrenLength.value - 1;
+                    resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value;
+                    moveToTargetPos = moveToIndex * step.value - preMarginShared.value;
+                    isCriticalItem = true;
+                }
+                else {
+                    selectedIndex = moveToIndex - patchElmNumShared.value;
+                    moveToTargetPos = moveToIndex * step.value - preMarginShared.value;
+                }
             }
-            else if (moveToIndex <= patchElementNum - 1) {
-                selectedIndex = moveToIndex === 0 ? totalElements.value - patchElementNum : totalElements.value - 1;
-                resetOffsetPos = (selectedIndex + patchElementNum) * step.value - previousMargin;
-                moveToTargetPos = moveToIndex * step.value - previousMargin;
-                isCriticalItem = true;
+            return {
+                selectedIndex,
+                isCriticalItem,
+                resetOffset: -resetOffsetPos,
+                targetOffset: -moveToTargetPos
+            };
+        }
+        function canMove(eventData) {
+            'worklet';
+            const { translation } = eventData;
+            const currentOffset = Math.abs(offset.value);
+            if (!circularShared.value) {
+                if (translation < 0) {
+                    return currentOffset < step.value * (childrenLength.value - 1);
+                }
+                else {
+                    return currentOffset > 0;
+                }
             }
             else {
-                selectedIndex = moveToIndex - patchElementNum;
-                moveToTargetPos = moveToIndex * step.value - previousMargin;
+                return true;
             }
         }
-        return {
-            selectedIndex,
-            isCriticalItem,
-            resetOffset: -resetOffsetPos,
-            targetOffset: -moveToTargetPos
-        };
-    }
-    function canMove(eventData) {
-        'worklet';
-        const { translation } = eventData;
-        const currentOffset = Math.abs(offset.value);
-        if (!props.circular) {
-            if (translation < 0) {
-                return currentOffset < step.value * (totalElements.value - 1);
+        function handleEnd(eventData) {
+            'worklet';
+            const { isCriticalItem, targetOffset, resetOffset, selectedIndex } = getTargetPosition(eventData);
+            if (isCriticalItem) {
+                offset.value = withTiming(targetOffset, {
+                    duration: easeDuration,
+                    easing: easeMap[easeingFunc]
+                }, () => {
+                    if (touchfinish.value !== false) {
+                        currentIndex.value = selectedIndex;
+                        offset.value = resetOffset;
+                        runOnJS(resumeLoop)();
+                    }
+                });
             }
             else {
-                return currentOffset > 0;
+                offset.value = withTiming(targetOffset, {
+                    duration: easeDuration,
+                    easing: easeMap[easeingFunc]
+                }, () => {
+                    if (touchfinish.value !== false) {
+                        currentIndex.value = selectedIndex;
+                        runOnJS(resumeLoop)();
+                    }
+                });
             }
         }
-        else {
-            return true;
-        }
-    }
-    function handleEnd(eventData) {
-        'worklet';
-        const { isCriticalItem, targetOffset, resetOffset, selectedIndex } = getTargetPosition(eventData);
-        if (isCriticalItem) {
-            offset.value = withTiming(targetOffset, {
-                duration: easeDuration,
-                easing: easeMap[easeingFunc]
-            }, () => {
-                if (touchfinish.value !== false) {
-                    currentIndex.value = selectedIndex;
-                    offset.value = resetOffset;
-                    runOnJS(resumeLoop)();
-                }
-            });
-        }
-        else {
+        function handleBack(eventData) {
+            'worklet';
+            const { translation } = eventData;
+            // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
+            let currentOffset = Math.abs(offset.value);
+            if (circularShared.value) {
+                currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value;
+            }
+            const curIndex = currentOffset / step.value;
+            const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value;
+            const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0);
             offset.value = withTiming(targetOffset, {
                 duration: easeDuration,
                 easing: easeMap[easeingFunc]
             }, () => {
                 if (touchfinish.value !== false) {
-                    currentIndex.value = selectedIndex;
+                    currentIndex.value = moveToIndex;
                     runOnJS(resumeLoop)();
                 }
             });
         }
-    }
-    function handleBack(eventData) {
-        'worklet';
-        const { translation } = eventData;
-        // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
-        const currentOffset = Math.abs(offset.value);
-        const curIndex = currentOffset / step.value;
-        const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElementNum;
-        const targetOffset = -(moveToIndex + patchElementNum) * step.value + (translation < 0 ? -previousMargin : previousMargin);
-        offset.value = withTiming(targetOffset, {
-            duration: easeDuration,
-            easing: easeMap[easeingFunc]
-        }, () => {
-            if (touchfinish.value !== false) {
-                currentIndex.value = moveToIndex;
+        function handleLongPress() {
+            'worklet';
+            const currentOffset = Math.abs(offset.value);
+            let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
+            if (circularShared.value) {
+                preOffset -= preMarginShared.value;
+            }
+            // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
+            const diffOffset = preOffset - currentOffset;
+            const half = Math.abs(diffOffset) > step.value / 2;
+            if (+diffOffset === 0) {
                 runOnJS(resumeLoop)();
             }
-        });
-    }
-    function handleLongPress(eventData) {
-        'worklet';
-        const { translation } = eventData;
-        const currentOffset = Math.abs(offset.value) + (translation < 0 ? previousMargin : -previousMargin);
-        const half = currentOffset % step.value > step.value / 2;
-        // 向右trans < 0, 向左trans > 0
-        const isExceedHalf = translation < 0 ? half : !half;
-        if (+translation === 0) {
-            runOnJS(resumeLoop)();
-        }
-        else if (isExceedHalf) {
-            handleEnd(eventData);
-        }
-        else {
-            handleBack(eventData);
-        }
-    }
-    function reachBoundary(eventData) {
-        'worklet';
-        // 移动的距离
-        const { translation } = eventData;
-        const elementsLength = step.value * totalElements.value;
-        let isBoundary = false;
-        let resetOffset = 0;
-        // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
-        const currentOffset = offset.value;
-        const moveStep = Math.ceil(translation / elementsLength);
-        if (translation < 0) {
-            const posEnd = (totalElements.value + patchElementNum + 1) * step.value;
-            const posReverseEnd = (patchElementNum - 1) * step.value;
-            if (currentOffset < -posEnd + step.value) {
-                isBoundary = true;
-                resetOffset = Math.abs(moveStep) === 0 ? patchElementNum * step.value + translation : moveStep * elementsLength;
+            else if (half) {
+                handleEnd({ translation: diffOffset });
             }
-            if (currentOffset > -posReverseEnd) {
-                isBoundary = true;
-                resetOffset = moveStep * elementsLength;
+            else {
+                handleBack({ translation: diffOffset });
             }
         }
-        else if (translation > 0) {
-            const posEnd = (patchElementNum - 1) * step.value;
-            const posReverseEnd = (patchElementNum + totalElements.value) * step.value;
-            if (currentOffset > -posEnd) {
-                isBoundary = true;
-                resetOffset = moveStep * elementsLength + step.value + (moveStep === 1 ? translation : 0);
+        function reachBoundary(eventData) {
+            'worklet';
+            // 移动的距离
+            const { translation } = eventData;
+            const elementsLength = step.value * childrenLength.value;
+            let isBoundary = false;
+            let resetOffset = 0;
+            // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
+            const currentOffset = offset.value;
+            const moveStep = Math.ceil(translation / elementsLength);
+            if (translation < 0) {
+                const posEnd = (childrenLength.value + patchElmNumShared.value + 1) * step.value;
+                const posReverseEnd = (patchElmNumShared.value - 1) * step.value;
+                if (currentOffset < -posEnd + step.value) {
+                    isBoundary = true;
+                    resetOffset = Math.abs(moveStep) === 0 ? patchElmNumShared.value * step.value + translation : moveStep * elementsLength;
+                }
+                if (currentOffset > -posReverseEnd) {
+                    isBoundary = true;
+                    resetOffset = moveStep * elementsLength;
+                }
             }
-            if (currentOffset < -posReverseEnd) {
-                isBoundary = true;
-                resetOffset = moveStep * elementsLength + patchElementNum * step.value;
+            else if (translation > 0) {
+                const posEnd = (patchElmNumShared.value - 1) * step.value;
+                const posReverseEnd = (patchElmNumShared.value + childrenLength.value) * step.value;
+                if (currentOffset > -posEnd) {
+                    isBoundary = true;
+                    resetOffset = moveStep * elementsLength + step.value + (moveStep === 1 ? translation : 0);
+                }
+                if (currentOffset < -posReverseEnd) {
+                    isBoundary = true;
+                    resetOffset = moveStep * elementsLength + patchElmNumShared.value * step.value;
+                }
+            }
+            return {
+                isBoundary,
+                resetOffset: -resetOffset
+            };
+        }
+        const gesturePan = Gesture.Pan()
+            .onBegin((e) => {
+            'worklet';
+            if (!step.value)
+                return;
+            touchfinish.value = false;
+            cancelAnimation(offset);
+            runOnJS(pauseLoop)();
+            preAbsolutePos.value = e[strAbso];
+            moveTranstion.value = e[strAbso];
+            moveTime.value = new Date().getTime();
+        })
+            .onTouchesMove((e) => {
+            'worklet';
+            if (touchfinish.value)
+                return;
+            const touchEventData = e.changedTouches[0];
+            const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
+            const eventData = {
+                translation: moveDistance
+            };
+            // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+            if (!circularShared.value && !canMove(eventData)) {
+                return;
+            }
+            const { isBoundary, resetOffset } = reachBoundary(eventData);
+            if (isBoundary && circularShared.value) {
+                offset.value = resetOffset;
+            }
+            else {
+                offset.value = moveDistance + offset.value;
+            }
+            preAbsolutePos.value = touchEventData[strAbso];
+        })
+            .onTouchesUp((e) => {
+            'worklet';
+            if (touchfinish.value)
+                return;
+            const touchEventData = e.changedTouches[0];
+            const moveDistance = touchEventData[strAbso] - moveTranstion.value;
+            touchfinish.value = true;
+            const eventData = {
+                translation: moveDistance
+            };
+            // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
+            if (!circularShared.value && !canMove(eventData)) {
+                return;
             }
-        }
-        return {
-            isBoundary,
-            resetOffset: -resetOffset
-        };
-    }
-    const gestureHandler = Gesture.Pan()
-        .onBegin((e) => {
-        'worklet';
-        touchfinish.value = false;
-        cancelAnimation(offset);
-        runOnJS(pauseLoop)();
-        preAbsolutePos.value = e[strAbso];
-        moveTranstion.value = e[strAbso];
-        moveTime.value = new Date().getTime();
-    })
-        .onTouchesMove((e) => {
-        'worklet';
-        const touchEventData = e.changedTouches[0];
-        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
-        customTrans.value = moveDistance;
-        const eventData = {
-            translation: moveDistance
-        };
-        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        if (!props.circular && !canMove(eventData)) {
-            return;
-        }
-        const { isBoundary, resetOffset } = reachBoundary(eventData);
-        if (isBoundary && props.circular && !touchfinish.value) {
-            offset.value = resetOffset;
-        }
-        else {
-            offset.value = moveDistance + offset.value;
-        }
-        preAbsolutePos.value = touchEventData[strAbso];
-    })
-        .onTouchesUp((e) => {
-        'worklet';
-        const touchEventData = e.changedTouches[0];
-        const moveDistance = touchEventData[strAbso] - moveTranstion.value;
-        touchfinish.value = true;
-        const eventData = {
-            translation: moveDistance
-        };
-        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-        if (!props.circular && !canMove(eventData)) {
-            return;
-        }
-        if (!moveDistance) {
-            handleLongPress({ translation: customTrans.value });
-        }
-        else {
             const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
             if (Math.abs(strVelocity) < longPressRatio) {
-                handleLongPress(eventData);
+                handleLongPress();
             }
             else {
                 handleEnd(eventData);
             }
-        }
-    });
+        });
+        return {
+            gestureHandler: gesturePan
+        };
+    }, []);
     const animatedStyles = useAnimatedStyle(() => {
-        if (dir.value === 'x') {
+        if (dir === 'x') {
             return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 };
         }
         else {
@@ -577,9 +639,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     });
     function renderSwiper() {
+        const arrPages = renderItems();
         return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
         <Animated.View style={[{
-                    flexDirection: dir.value === 'x' ? 'row' : 'column',
+                    flexDirection: dir === 'x' ? 'row' : 'column',
                     width: '100%',
                     height: '100%'
                 }, animatedStyles]}>
@@ -595,7 +658,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         {showsPagination && renderPagination()}
     </View>);
     }
-    if (totalElements.value === 1) {
+    if (children.length === 1) {
         return renderSwiper();
     }
     else {