@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -1,8 +1,8 @@
 /**
  * swiper 实现
  */
-import { View, ScrollView, Dimensions, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint } from 'react-native'
-import React, { forwardRef, useState, useRef, useEffect, ReactNode } from 'react'
+import { Animated, View, ScrollView, Dimensions, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint, Platform } from 'react-native'
+import { JSX, forwardRef, useState, useRef, useEffect, ReactNode } from 'react'
 import { CarouseProps, CarouseState } from './type'
 import { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
@@ -11,6 +11,9 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
  * 默认的Style类型
  */
 const styles: { [key: string]: Object } = {
+  slide: {
+    backgroundColor: 'transparent'
+  },
   container_x: {
     position: 'relative',
   },
@@ -41,23 +44,31 @@ const styles: { [key: string]: Object } = {
 }
 
 
-const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>((props , ref): React.JSX.Element => {
+const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>((props , ref): JSX.Element => {
   // 默认取水平方向的width
   const { width } = Dimensions.get('window')
-  const defaultHeight = 150
+  const { styleObj } = props
+  const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children
+  const totalElements = Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0)
+  // const defaultHeight = (styleObj?.height || 150) - previousMargin - nextMargin
+  // const defaultWidth = (styleObj?.width || width || 375) - previousMargin - nextMargin
+  const defaultHeight = (styleObj?.height || 150)
+  const defaultWidth = (styleObj?.width || width || 375)
   const dir = props.horizontal === false ? 'y' : 'x'
   // state的offset默认值
-  const defaultX = width * (props.circular ? props.current + 1 : props.current) || 0
-  const defaultY = defaultHeight * (props.circular ? props.current + 1 : props.current) || 0
+  // const initIndex = props.circular ? props.current + 1: (props.current || 0)
+  // 记录真正的下标索引, 不包括循环前后加入的索引, 游标
+  const initIndex = props.current || 0
+  // 这里要排除超过元素个数的设置
+  const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
+  // const defaultX = (defaultWidth * initOffsetIndex + previousMargin) || 0
+  // const defaultY = (defaultHeight * initOffsetIndex + previousMargin) || 0
+  const defaultX = (defaultWidth * initOffsetIndex) || 0
+  const defaultY = (defaultHeight * initOffsetIndex) || 0
   // 内部存储上一次的offset值
-  const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children
-  // 默认设置为初次渲染
-  const initRenderRef = useRef(true)
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
-  let loopJumpTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null) 
   const { nodeRef: scrollViewRef } = useNodesRef<ScrollView, CarouseProps>(props, ref, {
   })
-  const autoplayEndRef = useRef(false)
   // 存储layout布局信息
   const layoutRef = useRef({})
   // 内部存储上一次的偏移量
@@ -68,125 +79,169 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     },
     isScrolling: false
   })
+  const isDragRef = useRef(false)
   const [state, setState] = useState({
     children: newChild,
-    width: width || 375,
+    width: defaultWidth || 375,
     height: defaultHeight,
-    index: 0,
-    total: Array.isArray(newChild) ? newChild.length : ( newChild ? 1 : 0),
+    // 真正的游标索引, 从0开始
+    index: initIndex,
+    total: totalElements,
     offset: {
       x: dir === 'x' ? defaultX : 0,
       y: dir === 'y' ? defaultY: 0
     },
-    loopJump: false,
     dir
   } as CarouseState);
 
+  /**
+   * @desc: 开启下一次自动轮播
+  */
+  function createAutoPlay () {
+    autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current)
+    autoplayTimerRef.current = setTimeout(() => {
+      startAutoPlay()
+    }, props.interval || 500)
+  }
+
   useEffect(() => {
     // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
     if (props.autoplay) {
-      startAutoPlay()
-    } else {
-      startSwiperLoop()
+      createAutoPlay()
     }
-  }, [props.autoplay, props.current, state.index]);
+  }, [props.autoplay, props.current, state.index, state.width, state.height]);
 
   /**
-   * 更新index，以视图的offset计算当前的索引
+   * @desc: 更新状态: index和offset, 并响应索引变化的事件
+   * scrollViewOffset: 移动到的目标位置
   */
-  function updateIndex (scrollViewOffset: NativeScrollPoint) {
-    const diff = scrollViewOffset[dir] - internalsRef.current.offset[state.dir]
-    if (!diff) return
-
-    const step = dir === 'x' ? state.width : state.height
-    let loopJump = false
-    let newIndex = state.index + Math.round(diff / step)
-    // 若是循环circular
-    // 1. 当前索引-1, 初始化为最后一个索引, 且scrollView的偏移量设置为 每个元素的步长 * 一共多少个元素， 这里为什么不减一呢
-    // 2. 当前索引>total, 初始化为第一个元素，且scrollView的偏移量设置为一个元素的步长
-    if (props.circular) {
-      if (state.index <= -1) {
-        newIndex = state.total - 1
-        scrollViewOffset[state.dir] = step * state.total
-        loopJump = true
-      } else if (newIndex >= state.total) {
-        newIndex = 0
-        scrollViewOffset[state.dir] = step
-        loopJump = true
-      }
-    }
-    // 存储当前的偏移量
-    internalsRef.current.offset = scrollViewOffset
-    // 这里需不需要区分是否loop，初始化？？？？
+  function updateIndex (scrollViewOffset: NativeScrollPoint, useIndex = false) {
+    const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset)
+    internalsRef.current.offset = nextOffset
     setState((preState) => {
       const newState =  {
         ...preState,
-        index: newIndex,
-        offset: scrollViewOffset,
-        loopJump
+        index: nextIndex,
+        // offset用来指示当前scrollView的偏移量
+        offset: nextOffset,
       }
       return newState
     })
     internalsRef.current.isScrolling = false
     // getCustomEvent
-    const eventData = getCustomEvent('change', {}, { detail: {current: newIndex, source: 'touch' }, layoutRef: layoutRef })
+    const eventData = getCustomEvent('change', {}, { detail: {current: nextIndex, source: 'touch' }, layoutRef: layoutRef })
     props.bindchange && props.bindchange(eventData)
     // 更新完状态之后, 开启新的loop
   }
 
   /**
-   * 用户手动点击播放
-   * 触发scrollView的onScrollEnd事件 => 然后更新索引 => 通过useEffect事件 => startSwiperLoop => 主动更新scrollView到指定的位置
-   * 若是circular, 到最后一个索引会更新为0，但是视觉要scrollView到下一个
-   * 若是circular, 到第一个再往前索引会更新为total-1, 但是视觉是展示的最后一个
+   * @desc: 获取下一个位置的索引、scrollView的contentOffset、scrollTo到的offset
+   * @desc: 包括正循环、反向循环、不循环
+   * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset, 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
   */
-  function startSwiperLoop () {
-    loopJumpTimerRef.current = setTimeout(() => {
-      let offset = { x: 0, y: 0, animated: false}
-      if (state.index > 0){
-        offset = props.horizontal ? { x: state.width * state.index, y: 0, animated: false } : { x: 0, y: state.height * state.index, animated: false }
-      }
-      if (props.circular) {
-        offset = props.horizontal ? { x: state.width * (state.index + 1), y: 0, animated: false } : { x: 0, y: state.height * (state.index + 1), animated: false }
+  function getNextConfig (scrollViewOffset: NativeScrollPoint) {
+    const step = state.dir === 'x' ? state.width : state.height
+    let currentOffset = state.offset
+    let nextIndex = state.index + 1
+    let nextOffset = currentOffset
+    // autoMoveOffset scrollView 滚动到前后增加的位置
+    let autoMoveOffset = currentOffset
+    let isBack = false
+    let isAutoEnd = false
+    // 如果是循环反向的
+    if (scrollViewOffset?.[state.dir] < currentOffset[state.dir]) {
+      isBack = true
+      nextIndex = isBack ? nextIndex - 2 : nextIndex
+    }
+    if (!props.circular) {
+      // nextIndex = isBack ? nextIndex - 2 : nextIndex
+      nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex })
+    } else {
+      if (isBack) {
+        if (nextIndex < 0) {
+          // 反向: scollView 滚动到虚拟的位置
+          autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 })
+          nextIndex = state.total - 1
+          // 反向: 数组最后一个index
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }),
+          isAutoEnd = true
+        } else {
+          // 反向非最后一个
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: ( nextIndex + 1 ) * step })
+        }
+      } else {
+        if (nextIndex > state.total - 1) {
+          autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * ( nextIndex + 1 )})
+          nextIndex = 0
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }),
+          isAutoEnd = true
+        } else {
+          // nextIndex =  nextIndex,
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step })
+        }
       }
-      scrollViewRef.current?.scrollTo(offset)
-      internalsRef.current.offset = offset
-    }, props.duration || 500)
+    }
+    return {
+      nextIndex,
+      nextOffset,
+      autoMoveOffset,
+      isAutoEnd
+    }
   }
 
   /**
-   * 开启自动轮播
-   * 每间隔interval scrollView的offset更改到下一个位置，通过onScrollEnd来获取contentOffset再计算要更新的索引index
+   * @desc: 开启自动轮播
   */
   function startAutoPlay () {
-    // 已经开启过autopaly则不重新创建
-    if (!Array.isArray(state.children) || !props.autoplay || internalsRef.current.isScrolling || autoplayEndRef.current) {
+    if (state.width && isNaN(+state.width)) {
+      createAutoPlay()
       return
     }
-    autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current)
-    // 非循环自动播放的形式下 到最后一帧 结束自动播放
-    if (!props.circular && state.index === state.total -1) {
-      autoplayEndRef.current = true
+    if (!Array.isArray(state.children)) {
       return
     }
-    
-    // 开启自动播放
-    autoplayTimerRef.current = setTimeout(() => {
-      if (state.total < 2) return
-      const nexStep = 1
-      const toIndex = (props.circular ? 1 : 0) + nexStep + state.index
-      let x = 0
-      let y = 0
-      if (state.dir === 'x') x = toIndex * state.width
-      if (state.dir === 'y') y = toIndex * state.height
-      // animated会影响切换的offset，先改为false
-      scrollViewRef.current?.scrollTo({ x, y, animated: false })
-
-      internalsRef.current.isScrolling = true
-
-      autoplayEndRef.current = false
-      updateIndex({ x, y })
-    }, props.interval || 5000)
+    const step = state.dir === 'x' ? state.width : state.height
+    const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset)
+    // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
+    // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
+    if (Platform.OS === 'ios') {
+      if (!isAutoEnd) {
+        scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
+      } else {
+        if (state.dir === 'x') {
+          scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true })
+        } else {
+          scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true })
+        }
+      }
+    } else {
+      if (!isAutoEnd) {
+        scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
+        onScrollEnd({
+          nativeEvent: {
+            // @ts-ignore
+            x: +nextOffset['x'],
+            y: +nextOffset['y']
+          }
+        })
+      } else {
+        setTimeout(() => {
+          onScrollEnd({
+            nativeEvent: {
+              // @ts-ignore
+              x: 0,
+              y: 0
+            }
+          })
+        }, 10)
+        if (state.dir === 'x') {
+          scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true })
+          // scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true })
+        } else {
+          scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true })
+        }
+      }
+    }
   }
 
   /**
@@ -195,11 +250,18 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   function onScrollBegin () {
     internalsRef.current.isScrolling = true
   }
+
+  /**
+   * 当用户开始拖动结束
+   */
   function onScrollEnd (event: NativeSyntheticEvent<NativeScrollEvent>) {
+    // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+    if (totalElements === 1) {
+      return
+    }
     internalsRef.current.isScrolling = false
-    
     // 用户手动滑动更新索引后，如果开启了自动轮播等重新开始
-    updateIndex(event.nativeEvent.contentOffset)
+    updateIndex(event.nativeEvent.contentOffset, true)
   }
 
   /**
@@ -208,59 +270,59 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   function onScrollEndDrag (event: NativeSyntheticEvent<NativeScrollEvent>) {
     const { contentOffset } = event.nativeEvent
     const { index, total } = state
-
+    isDragRef.current = true
     const internalOffset = internalsRef.current.offset
     const previousOffset = props.horizontal ? internalOffset.x : internalOffset.y
-    const newOffset = props.horizontal ? contentOffset.x : contentOffset.y
-
-    if (previousOffset === newOffset && (index === 0 || index === total - 1)) {
+    const moveOffset = props.horizontal ? contentOffset.x : contentOffset.y
+    // const diff = moveOffset - previousOffset
+    /*
+    if (diff > 0 && state.index + 1 >= total) {
+      const { nextOffset } = getNextConfig(contentOffset)
+      // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: false })
+    } else if ( diff < 0 && state.index -1 < 0) {
+      const { nextOffset } = getNextConfig(contentOffset)
+      // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: false })
+    }
+    */
+    if (previousOffset === moveOffset && (index === 0 || index === total - 1)) {
       internalsRef.current.isScrolling = false
     }
   }
-  /**
-   * 垂直方向时，获取单个元素的布局，更新
-  */
-  function onItemLayout (event: LayoutChangeEvent) {
-    if (!initRenderRef.current || state.dir === 'x') return
-    const { width, height } = event.nativeEvent.layout
-    if (state.total > 1) {
-      internalsRef.current.offset[state.dir] = (state.dir === 'y' ? height * state.index : state.width * state.index)
-    }
-
-    if (!state.offset.x && !state.offset.y) {
-      state.offset = internalsRef.current.offset
-    }
 
-    if (initRenderRef.current && state.total > 1) {
-      scrollViewRef.current?.scrollTo({ ...internalsRef.current.offset, animated: false })
-      initRenderRef.current = false
-    }
-    setState((preState) => {
-      return {
-        ...preState,
-        height
-      }
-    })
-  }
   /**
-   * 水平方向时，获取单个元素的布局，更新
+   * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
   */
   function onWrapperLayout () {
     if (props.enableOffset) {
       // @ts-ignore
       scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
         layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+        const isWDiff = state.width !== width
+        const isHDiff = state.height !== height
+        if (isWDiff || isHDiff) {
+          const changeState = {
+            width: isWDiff ? width : state.width,
+            height: isHDiff ? height : state.height
+          }
+          let correctOffset = Object.assign({}, state.offset, {
+            [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
+          })
+          state.offset = correctOffset
+          state.width = width
+          state.height = height
+          setState((preState) => {
+            return {
+              ...preState,
+              offset: correctOffset,
+              width: changeState.width,
+              height: changeState.height
+            }
+          })
+          scrollViewRef.current?.scrollTo({ x: correctOffset['x'], y: correctOffset['y'], animated: false })
+        }
         props.getInnerLayout && props.getInnerLayout(layoutRef)
       })
     }
-    if (state.dir === 'y') return
-    if (!state.offset.x && !state.offset.y) {
-      state.offset = internalsRef.current.offset
-    }
-    if (!initRenderRef.current && state.total > 1) {
-      scrollViewRef.current?.scrollTo({ ...state.offset, animated: false })
-      initRenderRef.current = false
-    }
   }
 
   function renderScrollView (pages: ReactNode) {
@@ -275,9 +337,11 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
       removeClippedSubviews: true,
       automaticallyAdjustContentInsets: false
     }
+    const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth }
     return (
-      <ScrollView
+      <Animated.ScrollView
         {...scrollElementProps}
+        style={[layoutStyle]}
         overScrollMode="always"
         contentOffset={state.offset}
         onScrollBeginDrag={onScrollBegin}
@@ -285,7 +349,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
         onScrollEndDrag={onScrollEndDrag}
       >
         {pages}
-      </ScrollView>
+      </Animated.ScrollView>
     )
   }
 
@@ -328,10 +392,10 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
       </View>
     )
   }
-
+  
   function renderPages () {
     const { width, height, total, children } = state
-    const { circular, previousMargin, nextMargin, innerProps } = props
+    const { circular } = props
     const pageStyle = { width: width, height: height }
     if (total > 1 && Array.isArray(children)) {
       let arrElements: (Array<ReactNode>) = []
@@ -343,23 +407,8 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
         pages.push('0')
       }
       arrElements = pages.map((page, i) => {
-        let pageStyle2 = { width: width, height: height }
-        const extraStyle = {} as {
-          left? : number;
-          marginLeft?: number;
-          paddingLeft?: number
-        }
-
-        if (previousMargin) {
-            extraStyle.left = +previousMargin
-        }
-        if (nextMargin && state.index === i - 1) {
-          const half = Math.floor(+nextMargin / 2)
-          extraStyle.marginLeft = - half
-          extraStyle.paddingLeft = half
-        }
         return (
-          <View style={[pageStyle2, extraStyle]} key={ 'page' + i} onLayout={onItemLayout}>
+          <View style={[pageStyle, styles.slide]} key={ 'page' + i}>
             {children[+page]}
           </View>
         )
@@ -374,22 +423,20 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     }
   }
 
-  const vStyle = {} as { height: number }
-  if (dir === 'y') {
-    vStyle.height = defaultHeight
-  }
   const pages: Array<ReactNode> | ReactNode = renderPages()
   const strStyle: string = 'container_' + state.dir
   const eventProps = props.innerProps || {}
+  const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth }
 
-  return (
+  return (<View style={[layoutStyle]}>
     <View
-      style={[styles[strStyle], vStyle]}
+      style={[styles[strStyle], layoutStyle]}
       {...eventProps}
       onLayout={onWrapperLayout}>
       {renderScrollView(pages)}
-      {props.showsPagination && renderPagination()}
-    </View>)
+    </View>
+    <View>{props.showsPagination && renderPagination()}</View>
+  </View>)
   
 })
 

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

@@ -1,5 +1,5 @@
-import { View, ScrollView } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
+import { ScrollView } from 'react-native'
+import { JSX, MutableRefObject, forwardRef, useRef } from 'react'
 import { default as Carouse } from './carouse'
 import { SwiperProps } from './type'
 import useInnerProps from '../getInnerListeners'
@@ -15,11 +15,12 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
  * ✔ circular
  * ✔ vertical
  * ✘ display-multiple-items
- * ✔ previous-margin
- * ✔ next-margin
+ * ✘ previous-margin
+ * ✘ next-margin
+ * ✔ easing-function  ="easeOutCubic"
  * ✘ snap-to-edge
  */
-const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperProps>((props: SwiperProps, ref): React.JSX.Element => {
+const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
   const { children } = props
   let innerLayout = useRef({})
   const swiperProp = {
@@ -32,11 +33,12 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     dotColor: props['indicator-color'] || "rgba(0, 0, 0, .3)",
     activeDotColor: props['indicator-active-color'] || '#000000',
     horizontal: props.vertical !== undefined ? !props.vertical : true,
-    style: props.style,
+    styleObj: props.style || {},
     previousMargin: props['previous-margin'] ? parseInt(props['previous-margin']) : 0,
     nextMargin: props['next-margin'] ? parseInt(props['next-margin']) : 0,
-    enableOffset: props['enable-offset'] || false,
-    bindchange: props.bindchange
+    enableOffset: props['enable-offset'] || true,
+    bindchange: props.bindchange,
+    easingFunction: props['easing-function'] || 'default'
   }
   const { nodeRef } = useNodesRef<ScrollView, SwiperProps>(props, ref, {
   })
@@ -49,16 +51,13 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     'previous-margin',
     'next-margin'
   ], { layoutRef: innerLayout })
-
-  const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
+  const getInnerLayout = (layout: MutableRefObject<{}>) => {
     innerLayout.current = layout.current
   }
-
   return <Carouse
     getInnerLayout={getInnerLayout}
     innerProps={innerProps}
-    {...swiperProp}
-    {...innerProps}>
+    {...swiperProp}>
     {children}
   </Carouse>
 

package/lib/runtime/components/react/mpx-swiper/type.ts

@@ -1,5 +1,8 @@
 import { ReactNode } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
+
+export type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
+
 export interface SwiperProps {
   children?: ReactNode;
   circular?: boolean;
@@ -11,8 +14,8 @@ export interface SwiperProps {
   'indicator-color'?: string;
   'indicator-active-color'?: string;
   vertical?: boolean;
-  style?: string;
-  easingFunction?: string;
+  style?: Object;
+  'easing-function'?: EaseType;
   'previous-margin'?: string;
   'next-margin'?: string;
   'enable-offset'?: boolean;
@@ -30,14 +33,17 @@ export interface CarouseProps {
   dotColor?: string;
   activeDotColor?: string;
   horizontal?: boolean;
-  style?: string;
-  easingFunction?: string;
+  easingFunction?: EaseType;
   previousMargin?: number;
   nextMargin?: number;
   enableOffset?: boolean;
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
   getInnerLayout: Function,
   innerProps: Object;
+  styleObj: {
+    height?: number;
+    width?: number
+  };
 }
 
 export interface CarouseState {
@@ -55,6 +61,7 @@ export interface CarouseState {
   autoplayEnd: boolean;
   loopJump: boolean;
   dir: 'x' | 'y';
+  isScrollEnd: boolean
 }
 
 export interface ScrollElementProps {

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

@@ -1,16 +1,17 @@
 import { View } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
+import { ReactNode, forwardRef, useRef } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 
 interface SwiperItemProps {
   'item-id'?: string;
   'enable-offset'?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
+  style?: Object;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
-  const { children, 'enable-offset': enableOffset } = props
+  const { children, 'enable-offset': enableOffset, style } = props
   const layoutRef = useRef({})
   const { nodeRef } = useNodesRef(props, ref, {})
 
@@ -31,6 +32,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     <View
       ref={nodeRef}
       data-itemId={props['item-id']}
+      style={[style]}
       {...innerProps}>
       {children}
     </View>