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

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

@@ -21,4 +21,3 @@ interface ColumnProps {
 }
 declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
 export default _PickerViewColumn;
-//# sourceMappingURL=index.d.ts.map

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

@@ -12,4 +12,3 @@ interface PickerColumnItemProps {
 }
 declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;
 export default PickerViewColumnItem;
-//# sourceMappingURL=pickerViewColumnItem.d.ts.map

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

@@ -11,4 +11,3 @@ interface PickerColumnItemProps {
 }
 declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;
 export default PickerViewColumnItem;
-//# sourceMappingURL=pickerViewColumnItemLite.d.ts.map

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

@@ -14,4 +14,3 @@ export declare const degToRad: (deg: number) => number;
 export declare const calcPickerHeight: (faces: Faces[], itemHeight: number) => number;
 export declare const calcHeightOffsets: (itemHeight: number) => number[];
 export declare const createFaces: (itemHeight: number, visibleCount: number) => Faces[];
-//# sourceMappingURL=pickerViewFaces.d.ts.map

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

@@ -10,4 +10,3 @@ declare const _PickerViewIndicator: {
     displayName: string;
 };
 export default _PickerViewIndicator;
-//# sourceMappingURL=pickerViewIndicator.d.ts.map

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

@@ -9,4 +9,3 @@ declare const _PickerViewMask: {
     displayName: string;
 };
 export default _PickerViewMask;
-//# sourceMappingURL=pickerViewMask.d.ts.map

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

@@ -20,4 +20,3 @@ declare const createPopupManager: (options?: IUsePopupOptions) => {
     remove: () => void;
 };
 export { createPopupManager };
-//# sourceMappingURL=index.d.ts.map

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

@@ -14,4 +14,3 @@ declare const PopupBase: {
     displayName: string;
 };
 export default PopupBase;
-//# sourceMappingURL=popupBase.d.ts.map

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

@@ -13,4 +13,3 @@ declare const Portal: {
     update: (key: number, e: ReactNode) => void;
 };
 export default Portal;
-//# sourceMappingURL=index.d.ts.map

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

@@ -27,4 +27,3 @@ declare class PortalGuard {
 export declare const portal: PortalGuard;
 declare const PortalHost: ({ children }: PortalHostProps) => JSX.Element;
 export default PortalHost;
-//# sourceMappingURL=portal-host.d.ts.map

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

@@ -7,4 +7,3 @@ export type State = {
 };
 declare const _PortalManager: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
 export default _PortalManager;
-//# sourceMappingURL=portal-manager.d.ts.map

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

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

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

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

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

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

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

@@ -1,2 +1 @@
 export declare const generateHTML: (html: string) => string;
-//# sourceMappingURL=html.d.ts.map

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

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

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

@@ -12,4 +12,3 @@ declare const _RootPortal: {
     displayName: string;
 };
 export default _RootPortal;
-//# sourceMappingURL=mpx-root-portal.d.ts.map

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

@@ -52,4 +52,3 @@ declare const _ScrollView: import("react").ForwardRefExoticComponent<ScrollViewP
     children?: ReactNode;
 } & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>> & import("react-native").ScrollView & View, ScrollViewProps>>>;
 export default _ScrollView;
-//# sourceMappingURL=mpx-scroll-view.d.ts.map

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

@@ -5,4 +5,3 @@ declare const SimpleText: {
     displayName: string;
 };
 export default SimpleText;
-//# sourceMappingURL=mpx-simple-text.d.ts.map

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

@@ -5,4 +5,3 @@ declare const SimpleView: {
     displayName: string;
 };
 export default SimpleView;
-//# sourceMappingURL=mpx-simple-view.d.ts.map

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

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

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

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

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

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

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

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

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

@@ -56,8 +56,8 @@ interface SwiperProps {
     'wait-for'?: Array<GestureHandler>;
     'simultaneous-handlers'?: Array<GestureHandler>;
     disableGesture?: boolean;
+    'display-multiple-items'?: number;
     bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
 export default SwiperWrapper;
-//# sourceMappingURL=mpx-swiper.d.ts.map

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);
     // 记录选中元素的索引值
@@ -168,7 +170,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 +226,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 +289,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;
                 }
@@ -438,12 +456,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 +480,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 +517,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 +647,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

@@ -121,4 +121,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/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)
   // 记录选中元素的索引值
@@ -285,7 +288,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 +347,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 +410,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
         }
@@ -560,14 +580,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 +605,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 +639,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 +763,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

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

@@ -369,6 +369,17 @@ function normalizeBackgroundPosition (parts: PositionVal[]): backgroundPositionL
   let vStart: 'top' | 'bottom' = 'top'
   let vOffset: PositionVal = 0
 
+  if (!Array.isArray(parts)) {
+    // 模板 style 属性传入单个数值时不会和 class 一样转成数组，需要手动转换
+    parts = [parts]
+  }
+  // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh 以及 center 转化为 50%
+  parts = (parts as (PositionVal | string)[]).map((part) => {
+    if (typeof part !== 'string') return part
+    if (part === 'center') return '50%'
+    return global.__formatValue(part) as PositionVal
+  })
+
   if (parts.length === 4) return parts as backgroundPositionList
 
   // 归一化
@@ -514,19 +525,24 @@ function parseBgImage (text: string): {
   }
 }
 
-function normalizeBackgroundSize (backgroundSize: Exclude<ExtendedViewStyle['backgroundSize'], undefined>, type: 'image' | 'linear' | undefined) {
+function normalizeBackgroundSize (
+  backgroundSize: NonNullable<ExtendedViewStyle['backgroundSize']>,
+  type: 'image' | 'linear' | undefined
+): DimensionValue[] {
   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 as string) ? '100%' : val
+    if (type === 'linear' && /^cover|contain|auto$/.test(val)) {
+      val = '100%'
     }
-  }
 
-  return sizeList
+    // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh
+    return global.__formatValue(val) as DimensionValue
+  })
 }
 
 function preParseImage (imageStyle?: ExtendedViewStyle) {