@mpxjs/webpack-plugin 2.10.17-beta.4 → 2.10.17-beta.7

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

@@ -72,6 +72,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         marginBottom: dotSpacing,
         zIndex: 98
     };
+    const displayMultipleItems = props['display-multiple-items'] || 1;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -97,18 +98,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preMarginShared = useSharedValue(preMargin);
     const nextMarginShared = useSharedValue(nextMargin);
     const autoplayShared = useSharedValue(autoplay);
+    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 默认前后补位的元素个数
-    const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
+    const patchElmNum = (circular && children.length > 1) ? displayMultipleItems + 1 : 0;
     const patchElmNumShared = useSharedValue(patchElmNum);
+    const displayMultipleItemsShared = useSharedValue(displayMultipleItems);
     const circularShared = useSharedValue(circular);
-    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 对有变化的变量，在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;
+    const initStep = isNaN(pstep) ? 0 : pstep / displayMultipleItems;
     // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
     // 记录选中元素的索引值
@@ -126,6 +128,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTranstion = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    // 记录是否首次
+    const isFirstRef = useRef(true);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     // 判断gesture手势是否需要协同处理、等待手势失败响应
@@ -168,7 +172,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const { width, height } = e.nativeEvent.layout;
         const realWidth = dir === 'x' ? width - preMargin - nextMargin : width;
         const realHeight = dir === 'y' ? height - preMargin - nextMargin : height;
-        const iStep = dir === 'x' ? realWidth : realHeight;
+        const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems;
         if (iStep !== step.value) {
             step.value = iStep;
             updateCurrent(propCurrent, iStep);
@@ -224,19 +228,35 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function renderItems() {
         const intLen = children.length;
         let renderChild = children.slice();
+        // if (circular && intLen > 1) {
+        //   // 最前面加最后一个元素
+        //   const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
+        //   // 最后面加第一个元素
+        //   const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
+        //   if (preMargin) {
+        //     const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
+        //     const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
+        //     renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
+        //   } else {
+        //     renderChild = [lastChild].concat(renderChild).concat([firstChild])
+        //   }
+        // }
         if (circular && intLen > 1) {
-            // 最前面加最后一个元素
-            const lastChild = React.cloneElement(children[intLen - 1], { key: 'clone0' });
-            // 最后面加第一个元素
-            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 frontClones = [];
+            // 计算补位序列的起始索引。例如 len=3, patch=2 -> start=1 (即从B开始)
+            const startIndex = intLen - (patchElmNum % intLen);
+            for (let i = 0; i < patchElmNum; i++) {
+                const sourceIndex = (startIndex + i) % intLen;
+                frontClones.push(React.cloneElement(children[sourceIndex], { key: `clone_front_${i}` }));
+            }
+            // 动态生成后置补位元素
+            const backClones = [];
+            for (let i = 0; i < patchElmNum; i++) {
+                const sourceIndex = i % intLen;
+                backClones.push(React.cloneElement(children[sourceIndex], { key: `clone_back_${i}` }));
+            }
+            renderChild = [...frontClones, ...renderChild, ...backClones];
         }
         const arrChildren = renderChild.map((child, index) => {
             const extraStyle = {};
@@ -271,7 +291,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             let nextIndex = currentIndex.value;
             if (!circularShared.value) {
                 // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-                if (currentIndex.value === childrenLength.value - 1) {
+                if (currentIndex.value === childrenLength.value - displayMultipleItemsShared.value) {
                     pauseLoop();
                     return;
                 }
@@ -337,10 +357,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, []);
     function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
-            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
-        }
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindchange && bindchange(eventData);
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -390,9 +408,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && bindchange) {
+        if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
+        isFirstRef.current = false;
     });
     useEffect(() => {
         let patchStep = 0;
@@ -438,12 +457,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, [autoplay]);
     useEffect(() => {
-        if (circular !== circularShared.value) {
+        if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) {
             circularShared.value = circular;
-            patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0;
+            patchElmNumShared.value = patchElmNum;
+            displayMultipleItemsShared.value = displayMultipleItems;
             offset.value = getOffset(currentIndex.value, step.value);
         }
-    }, [circular, preMargin]);
+    }, [circular, patchElmNum, displayMultipleItems]);
     const { gestureHandler } = useMemo(() => {
         function getTargetPosition(eventData) {
             'worklet';
@@ -461,7 +481,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
             if (!circularShared.value) {
-                selectedIndex = moveToIndex;
+                const maxIndex = Math.max(0, childrenLength.value - displayMultipleItemsShared.value);
+                selectedIndex = Math.min(Math.max(moveToIndex, 0), maxIndex);
                 moveToTargetPos = selectedIndex * step.value;
             }
             else {
@@ -497,7 +518,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const gestureMovePos = offset.value + translation;
             if (!circularShared.value) {
                 // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-                const posEnd = -step.value * (childrenLength.value - 1);
+                const posEnd = -step.value * (childrenLength.value - displayMultipleItemsShared.value);
                 if (transdir < 0) {
                     return gestureMovePos > posEnd;
                 }
@@ -627,7 +648,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const { translation, transdir } = eventData;
             const moveToOffset = offset.value + translation;
             const maxOverDrag = Math.floor(step.value / 2);
-            const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0;
+            const maxOffset = translation < 0 ? -(childrenLength.value - displayMultipleItemsShared.value) * step.value : 0;
             let resistance = 0.1;
             let overDrag = 0;
             let finalOffset = 0;

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

@@ -24,4 +24,3 @@ interface _SwitchProps extends SwitchProps {
 }
 declare const _Switch: import("react").ForwardRefExoticComponent<_SwitchProps & import("react").RefAttributes<HandlerRef<Switch, _SwitchProps>>>;
 export default _Switch;
-//# sourceMappingURL=mpx-switch.d.ts.map

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

@@ -20,4 +20,3 @@ interface _TextProps extends TextProps {
 }
 declare const _Text: import("react").ForwardRefExoticComponent<_TextProps & import("react").RefAttributes<HandlerRef<Text, _TextProps>>>;
 export default _Text;
-//# sourceMappingURL=mpx-text.d.ts.map

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

@@ -5,4 +5,3 @@ import { HandlerRef } from './useNodesRef';
 export type TextareProps = Omit<InputProps & PrivateInputProps, 'type' | 'password' | 'multiline' | 'confirm-hold'>;
 declare const Textarea: import("react").ForwardRefExoticComponent<TextareProps & import("react").RefAttributes<HandlerRef<TextInput, TextareProps>>>;
 export default Textarea;
-//# sourceMappingURL=mpx-textarea.d.ts.map

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

@@ -99,4 +99,3 @@ interface VideoProps {
 }
 declare const MpxVideo: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<HandlerRef<View, VideoProps>>>;
 export default MpxVideo;
-//# sourceMappingURL=mpx-video.d.ts.map

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

@@ -33,4 +33,3 @@ export interface _ViewProps extends ViewProps {
 }
 declare const _View: import("react").ForwardRefExoticComponent<_ViewProps & import("react").RefAttributes<HandlerRef<View, _ViewProps>>>;
 export default _View;
-//# sourceMappingURL=mpx-view.d.ts.map

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

@@ -274,6 +274,18 @@ function normalizeBackgroundPosition(parts) {
     let hOffset = 0;
     let vStart = 'top';
     let vOffset = 0;
+    if (!Array.isArray(parts)) {
+        // 模板 style 属性传入单个数值时不会和 class 一样转成数组，需要手动转换
+        parts = [parts];
+    }
+    // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh 以及 center 转化为 50%
+    parts = parts.map((part) => {
+        if (typeof part !== 'string')
+            return part;
+        if (part === 'center')
+            return '50%';
+        return global.__formatValue(part);
+    });
     if (parts.length === 4)
         return parts;
     // 归一化
@@ -415,14 +427,16 @@ function normalizeBackgroundSize(backgroundSize, type) {
     const sizeList = backgroundSize.slice();
     if (sizeList.length === 1)
         sizeList.push('auto');
-    if (type === 'linear') {
+    return sizeList.map((val) => {
+        if (typeof val !== 'string')
+            return val;
         // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
-        for (const i in sizeList) {
-            const val = sizeList[i];
-            sizeList[i] = /^cover|contain|auto$/.test(val) ? '100%' : val;
+        if (type === 'linear' && /^cover|contain|auto$/.test(val)) {
+            val = '100%';
         }
-    }
-    return sizeList;
+        // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh
+        return global.__formatValue(val);
+    });
 }
 function preParseImage(imageStyle) {
     const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {};

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

@@ -20,4 +20,3 @@ interface WebViewProps {
 }
 declare const _WebView: import("react").ForwardRefExoticComponent<Omit<WebViewProps, "ref"> & import("react").RefAttributes<HandlerRef<WebView<{}>, WebViewProps>>>;
 export default _WebView;
-//# sourceMappingURL=mpx-web-view.d.ts.map

package/lib/runtime/components/react/dist/parser.d.ts

@@ -37,4 +37,3 @@ export declare class ReplaceSource {
     source(): string;
 }
 export {};
-//# sourceMappingURL=parser.d.ts.map

package/lib/runtime/components/react/dist/useNodesRef.d.ts

@@ -9,4 +9,3 @@ export type HandlerRef<T, P> = {
 };
 export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance?: Obj): void;
 export {};
-//# sourceMappingURL=useNodesRef.d.ts.map

package/lib/runtime/components/react/dist/utils.d.ts

@@ -39,8 +39,9 @@ interface TransformStyleConfig {
     parentFontSize?: number;
     parentWidth?: number;
     parentHeight?: number;
+    isTransformBorderRadiusPercent?: boolean;
 }
-export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
     hasVarDec: boolean;
     varContextRef: MutableRefObject<{}>;
     setWidth: Dispatch<SetStateAction<number>>;
@@ -121,4 +122,3 @@ export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, d
 };
 export declare function useRunOnJSCallback(callbackMapRef: MutableRefObject<Record<string, AnyFunc>>): (key: string, ...args: any) => any;
 export {};
-//# sourceMappingURL=utils.d.ts.map

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

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
@@ -110,15 +110,17 @@ export function splitStyle(styleObj) {
         }
     });
 }
-const selfPercentRule = {
-    translateX: 'width',
-    translateY: 'height',
+const radiusPercentRule = {
     borderTopLeftRadius: 'width',
     borderBottomLeftRadius: 'width',
     borderBottomRightRadius: 'width',
     borderTopRightRadius: 'width',
     borderRadius: 'width'
 };
+const selfPercentRule = Object.assign({
+    translateX: 'width',
+    translateY: 'height'
+}, radiusPercentRule);
 const parentHeightPercentRule = {
     height: true,
     minHeight: true,
@@ -193,7 +195,7 @@ function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
             const resolved = resolveVar(value, varContext);
             if (resolved === undefined) {
                 delete target[key];
-                // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
                 return;
             }
             target[key] = resolved;
@@ -343,15 +345,7 @@ function transformBoxShadow(styleObj) {
         return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
     }, '');
 }
-function transformZIndex(styleObj) {
-    if (!styleObj.zIndex || typeof styleObj.zIndex === 'number')
-        return;
-    if (styleObj.zIndex === 'auto') {
-        error('Property [z-index] does not supported [auto], please check again!');
-        styleObj.zIndex = 0;
-    }
-}
-export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
+export function useTransformStyle(styleObj = {}, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
@@ -403,7 +397,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     function calcVisitor({ key, value, keyPath }) {
         if (calcUseRegExp.test(value)) {
             // calc translate & border-radius 的百分比计算
-            if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+            if (hasOwn(selfPercentRule, key) && /calc\(\d+%/.test(value)) {
                 hasSelfPercent = true;
                 percentKeyPaths.push(keyPath.slice());
             }
@@ -412,7 +406,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     }
     function percentVisitor({ key, value, keyPath }) {
         // fixme 去掉 translate & border-radius 的百分比计算
-        if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+        // fixme Image 组件 borderRadius 仅支持 number
+        if (isTransformBorderRadiusPercent && hasOwn(radiusPercentRule, key) && PERCENT_REGEX.test(value)) {
+            hasSelfPercent = true;
+            percentKeyPaths.push(keyPath.slice());
+        }
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
             percentKeyPaths.push(keyPath.slice());
         }
     }
@@ -485,11 +484,6 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformStringify(normalStyle);
     // transform rpx to px
     transformBoxShadow(normalStyle);
-    // transform z-index auto to 0
-    transformZIndex(normalStyle);
-    if (Array.isArray(normalStyle.transform)) {
-        normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item));
-    }
     return {
         hasVarDec,
         varContextRef,

package/lib/runtime/components/react/mpx-image.tsx

@@ -26,7 +26,7 @@ import { noop } from '@mpxjs/utils'
 import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
 import Portal from './mpx-portal'
 
 export type Mode =
@@ -190,7 +190,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, isTransformBorderRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,

package/lib/runtime/components/react/mpx-input.tsx

@@ -285,11 +285,11 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const setKeyboardAvoidContext = () => {
     if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard }
       keyboardAvoid.current = {
         cursorSpacing,
         ref: nodeRef,
         adjustPosition,
+        holdKeyboard,
         // fix: iOS 会在 onFocus 之前触发 keyboardWillShow 并且赋值 keyboardHeight
         // 这里手动同步下 keyboardHeight，防止 onFocus setKeyboardAvoidContext 删掉 keyboardHeight
         keyboardHeight: keyboardAvoid?.current?.keyboardHeight

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -25,8 +25,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const isShow = useRef<boolean>(false)
 
   const animatedStyle = useAnimatedStyle(() => ({
-    // translate/position top可能会导致底部渲染区域缺失
-    marginTop: -offset.value,
+    // translate/position top+ overflow hidden 在 android 上时因为键盘顶起让页面高度变小，同时元素位置上移
+    // 此时最底部的区域是超出了页面高度的，hidden生效就被隐藏掉，因此需要 android 配置聚焦时禁用高度缩小
+    // margin-top 因为在 react-native 上和 flex 1 同时存在时，负值只会让容器高度整体变高，不会让元素上移
+    transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -73,6 +73,7 @@ interface SwiperProps {
   'wait-for'?: Array<GestureHandler>
   'simultaneous-handlers'?: Array<GestureHandler>
   disableGesture?: boolean
+  'display-multiple-items'?: number
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
@@ -167,6 +168,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     marginBottom: dotSpacing,
     zIndex: 98
   }
+  const displayMultipleItems = props['display-multiple-items'] || 1
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
   const horizontal = props.vertical !== undefined ? !props.vertical : true
@@ -200,18 +202,19 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const preMarginShared = useSharedValue(preMargin)
   const nextMarginShared = useSharedValue(nextMargin)
   const autoplayShared = useSharedValue(autoplay)
+  const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
   // 默认前后补位的元素个数
-  const patchElmNum = circular ? (preMargin ? 2 : 1) : 0
+  const patchElmNum = (circular && children.length > 1) ? displayMultipleItems + 1 : 0
   const patchElmNumShared = useSharedValue(patchElmNum)
+  const displayMultipleItemsShared = useSharedValue(displayMultipleItems)
   const circularShared = useSharedValue(circular)
-  const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
   // 对有变化的变量，在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: number = isNaN(pstep) ? 0 : pstep
+  const initStep: number = isNaN(pstep) ? 0 : pstep / displayMultipleItems
   // 每个元素的宽度 or 高度，有固定值直接初始化无则0
   const step = useSharedValue(initStep)
   // 记录选中元素的索引值
@@ -229,6 +232,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  // 记录是否首次
+  const isFirstRef = useRef(true)
 
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
@@ -285,7 +290,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const { width, height } = e.nativeEvent.layout
     const realWidth = dir === 'x' ? width - preMargin - nextMargin : width
     const realHeight = dir === 'y' ? height - preMargin - nextMargin : height
-    const iStep = dir === 'x' ? realWidth : realHeight
+    const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems
     if (iStep !== step.value) {
       step.value = iStep
       updateCurrent(propCurrent, iStep)
@@ -344,18 +349,35 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   function renderItems () {
     const intLen = children.length
     let renderChild = children.slice()
+    // if (circular && intLen > 1) {
+    //   // 最前面加最后一个元素
+    //   const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
+    //   // 最后面加第一个元素
+    //   const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
+    //   if (preMargin) {
+    //     const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
+    //     const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
+    //     renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
+    //   } else {
+    //     renderChild = [lastChild].concat(renderChild).concat([firstChild])
+    //   }
+    // }
     if (circular && intLen > 1) {
-      // 最前面加最后一个元素
-      const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
-      // 最后面加第一个元素
-      const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
-      if (preMargin) {
-        const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
-        const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
-        renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
-      } else {
-        renderChild = [lastChild].concat(renderChild).concat([firstChild])
+      // 动态生成前置补位元素
+      const frontClones = []
+      // 计算补位序列的起始索引。例如 len=3, patch=2 -> start=1 (即从B开始)
+      const startIndex = intLen - (patchElmNum % intLen)
+      for (let i = 0; i < patchElmNum; i++) {
+        const sourceIndex = (startIndex + i) % intLen
+        frontClones.push(React.cloneElement(children[sourceIndex], { key: `clone_front_${i}` }))
       }
+      // 动态生成后置补位元素
+      const backClones = []
+      for (let i = 0; i < patchElmNum; i++) {
+        const sourceIndex = i % intLen
+        backClones.push(React.cloneElement(children[sourceIndex], { key: `clone_back_${i}` }))
+      }
+      renderChild = [...frontClones, ...renderChild, ...backClones]
     }
     const arrChildren = renderChild.map((child, index) => {
       const extraStyle = {} as { [key: string]: any }
@@ -390,7 +412,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       let nextIndex = currentIndex.value
       if (!circularShared.value) {
         // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-        if (currentIndex.value === childrenLength.value - 1) {
+        if (currentIndex.value === childrenLength.value - displayMultipleItemsShared.value) {
           pauseLoop()
           return
         }
@@ -457,10 +479,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [])
 
   function handleSwiperChange (current: number, pCurrent: number) {
-    if (pCurrent !== currentIndex.value) {
-      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-      bindchange && bindchange(eventData)
-    }
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindchange && bindchange(eventData)
   }
 
   const runOnJSCallbackRef = useRef({
@@ -509,9 +529,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && bindchange) {
+    if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
+    isFirstRef.current = false
   })
 
   useEffect(() => {
@@ -560,14 +581,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       }
     }
   }, [autoplay])
-
   useEffect(() => {
-    if (circular !== circularShared.value) {
+    if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) {
       circularShared.value = circular
-      patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0
+      patchElmNumShared.value = patchElmNum
+      displayMultipleItemsShared.value = displayMultipleItems
       offset.value = getOffset(currentIndex.value, step.value)
     }
-  }, [circular, preMargin])
+  }, [circular, patchElmNum, displayMultipleItems])
   const { gestureHandler } = useMemo(() => {
     function getTargetPosition (eventData: EventDataType) {
       'worklet'
@@ -585,7 +606,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
       // 实际应该定位的索引值
       if (!circularShared.value) {
-        selectedIndex = moveToIndex
+        const maxIndex = Math.max(0, childrenLength.value - displayMultipleItemsShared.value)
+        selectedIndex = Math.min(Math.max(moveToIndex, 0), maxIndex)
         moveToTargetPos = selectedIndex * step.value
       } else {
         if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
@@ -618,7 +640,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const gestureMovePos = offset.value + translation
       if (!circularShared.value) {
         // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-        const posEnd = -step.value * (childrenLength.value - 1)
+        const posEnd = -step.value * (childrenLength.value - displayMultipleItemsShared.value)
         if (transdir < 0) {
           return gestureMovePos > posEnd
         } else {
@@ -742,7 +764,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const { translation, transdir } = eventData
       const moveToOffset = offset.value + translation
       const maxOverDrag = Math.floor(step.value / 2)
-      const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0
+      const maxOffset = translation < 0 ? -(childrenLength.value - displayMultipleItemsShared.value) * step.value : 0
       let resistance = 0.1
       let overDrag = 0
       let finalOffset = 0