Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/swiper/Swiper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Swiper = forwardRefWithStatics(
const rootDiv = useRef<HTMLDivElement>(null); // 根节点
const swiperContainer = useRef<HTMLDivElement>(null); // swiper容器节点
const swiperSource = useRef<SwiperChangeSource>('autoplay'); // swiper变化来源
const previousIndex = useRef(current || defaultCurrent || 0); // 上一次轮播页索引
const previousIndex = useRef<number>(current ?? defaultCurrent ?? 0); // 上一次轮播页索引
const nextIndex = useRef(previousIndex.current);
const items = useRef<SwiperItemReference[]>([]); // swiper子项
const [itemCount, setItemCount] = useState(0); // 轮播子项数量
Expand Down Expand Up @@ -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);
Expand All @@ -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 });
Expand Down
2 changes: 1 addition & 1 deletion src/swiper/defaultProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/swiper/swiper.en-US.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/swiper/swiper.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
:: BASE_DOC ::

## API

### Swiper Props

名称 | 类型 | 默认值 | 描述 | 必传
Expand All @@ -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
Expand Down
Loading