diff --git a/src/swiper/Swiper.tsx b/src/swiper/Swiper.tsx index 14f40180..40da9170 100644 --- a/src/swiper/Swiper.tsx +++ b/src/swiper/Swiper.tsx @@ -68,7 +68,7 @@ const Swiper = forwardRefWithStatics( const rootDiv = useRef(null); // 根节点 const swiperContainer = useRef(null); // swiper容器节点 const swiperSource = useRef('autoplay'); // swiper变化来源 - const previousIndex = useRef(current || defaultCurrent || 0); // 上一次轮播页索引 + const previousIndex = useRef(current ?? defaultCurrent ?? 0); // 上一次轮播页索引 const nextIndex = useRef(previousIndex.current); const items = useRef([]); // swiper子项 const [itemCount, setItemCount] = useState(0); // 轮播子项数量 @@ -417,7 +417,8 @@ const Swiper = forwardRefWithStatics( }); useEffect(() => { - // 初始化卡片的位置 + if (!items.current.length) return; + previousIndex.current = calculateItemIndex(previousIndex.current, items.current.length, loop); updateSwiperItemClassName(previousIndex.current, loop); setDotIndex(() => previousIndex.current); @@ -426,11 +427,12 @@ const Swiper = forwardRefWithStatics( useEffect(() => { if (currentIsNull) return; + if (!items.current.length) return; nextIndex.current = calculateItemIndex(current, items.current.length, loop); if (previousIndex.current !== nextIndex.current) { enterSwitching(directionAxis); } - }, [calculateItemIndex, current, directionAxis, enterSwitching, loop, currentIsNull]); + }, [calculateItemIndex, current, directionAxis, enterSwitching, loop, currentIsNull, itemCount]); useEffect(() => { onChange?.(previousIndex.current, { source: swiperSource.current }); diff --git a/src/swiper/defaultProps.ts b/src/swiper/defaultProps.ts index 3ec019f4..d8190f1a 100644 --- a/src/swiper/defaultProps.ts +++ b/src/swiper/defaultProps.ts @@ -7,7 +7,7 @@ import { TdSwiperProps } from './type'; export const swiperDefaultProps: TdSwiperProps = { animation: 'slide', autoplay: true, - current: 0, + defaultCurrent: 0, direction: 'horizontal', duration: 300, interval: 5000, diff --git a/src/swiper/swiper.en-US.md b/src/swiper/swiper.en-US.md index 44a84afe..679ee432 100644 --- a/src/swiper/swiper.en-US.md +++ b/src/swiper/swiper.en-US.md @@ -1,16 +1,16 @@ :: BASE_DOC :: ## API - ### Swiper Props name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N animation | String | slide | options: slide | N autoplay | Boolean | true | \- | N current | Number | 0 | \- | N +defaultCurrent | Number | 0 | uncontrolled property | N direction | String | horizontal | options: horizontal/vertical | N duration | Number | 300 | \- | N height | String / Number | - | \- | N diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md index d13f8e0a..41ff2fd9 100644 --- a/src/swiper/swiper.md +++ b/src/swiper/swiper.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### Swiper Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -11,6 +10,7 @@ style | Object | - | 样式,TS 类型:`React.CSSProperties` | N animation | String | slide | 轮播切换动画效果类型。可选项:slide | N autoplay | Boolean | true | 是否自动播放 | N current | Number | 0 | 当前轮播在哪一项(下标) | N +defaultCurrent | Number | 0 | 当前轮播在哪一项(下标)。非受控属性 | N direction | String | horizontal | 轮播滑动方向,包括横向滑动和纵向滑动两个方向。可选项:horizontal/vertical | N duration | Number | 300 | 滑动动画时长 | N height | String / Number | - | 当使用垂直方向滚动时的高度 | N