Skip to content

feat(Swiper): add animationfinish event #3885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 4, 2025
Merged

feat(Swiper): add animationfinish event #3885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 8 additions & 5 deletions packages/components/swiper/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ easing-function | String | default | `0.32.0`。options: default/linear/easeInCu
height | String / Number | 192 | \- | N
image-props | Object | - | `0.34.0` | N
interval | Number | 5000 | \- | N
list | Array | - | `0.32.0`。Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
list | Array | - | `0.32.0`。Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper/type.ts) | N
loop | Boolean | true | \- | N
navigation | Boolean / Object / Slot | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
navigation | Boolean / Object / Slot | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper/type.ts) | N
next-margin | String / Number | 0 | `0.32.0` | N
pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right | N
previous-margin | String / Number | 0 | `0.32.0` | N
Expand All @@ -29,9 +29,11 @@ snap-to-edge | Boolean | false | `0.32.0` | N

name | params | description
-- | -- | --
change | `(current: number, source: SwiperChangeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
animationfinish | `(current: number, source: SwiperChangeSource)` | `1.11.0`。动画结束时会触发 animationfinish 事件
change | `(current: number, source: SwiperChangeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
click | `(index: number)` | `0.34.0`
image-load | `(index: number)` | `1.1.4`

### Swiper External Classes

className | Description
Expand All @@ -55,7 +57,8 @@ min-show-num | Number | 2 | \- | N
pagination-position | String | bottom | `0.34.0`。options: top-left/top/top-right/bottom-left/bottom/bottom-right | N
show-controls | Boolean | false | `0.32.0` | N
total | Number | 0 | `0.34.0` | N
type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N
type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper-nav/type.ts) | N

### SwiperNav External Classes

className | Description
Expand All @@ -79,4 +82,4 @@ Name | Default Value | Description
--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
--td-swiper-nav-fraction-color | @text-color-anti | -
--td-swiper-nav-fraction-font-size | 24rpx | -
--td-swiper-nav-fraction-height | 48rpx | -
--td-swiper-nav-fraction-height | 48rpx | -
13 changes: 8 additions & 5 deletions packages/components/swiper/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@ easing-function | String | default | `0.32.0`。指定 swiper 切换缓动动画
height | String / Number | 192 | 轮播的高度；默认单位 `px` | N
image-props | Object | - | `0.34.0`。透传至 Image 组件 | N
interval | Number | 5000 | 轮播间隔时间 | N
list | Array | - | `0.32.0`。图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
list | Array | - | `0.32.0`。图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper/type.ts) | N
loop | Boolean | true | 是否循环播放 | N
navigation | Boolean / Object / Slot | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
navigation | Boolean / Object / Slot | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper/type.ts) | N
next-margin | String / Number | 0 | `0.32.0`。后边距，可用于露出后一项的一小部分。默认单位 `px` | N
pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N
previous-margin | String / Number | 0 | `0.32.0`。前边距，可用于露出前一项的一小部分。默认单位 `px` | N
Expand All @@ -91,9 +91,11 @@ snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等

名称 | 参数 | 描述
-- | -- | --
change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
animationfinish | `(current: number, source: SwiperChangeSource)` | `1.11.0`。轮播切换时触发
change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
click | `(index: number)` | `0.34.0`。点击轮播项时触发
image-load | `(index: number)` | `1.1.4`。图片加载时触发

### Swiper External Classes

类名 | 描述
Expand All @@ -117,7 +119,8 @@ min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N
pagination-position | String | bottom | `0.34.0`。页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N
show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 | N
total | Number | 0 | `0.34.0`。总共的项数 | N
type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N
type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/swiper-nav/type.ts) | N

### SwiperNav External Classes

类名 | 描述
Expand All @@ -141,4 +144,4 @@ t-class | 根节点样式类
--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
--td-swiper-nav-fraction-color | @text-color-anti | -
--td-swiper-nav-fraction-font-size | 24rpx | -
--td-swiper-nav-fraction-height | 48rpx | -
--td-swiper-nav-fraction-height | 48rpx | -
12 changes: 12 additions & 0 deletions packages/components/swiper/swiper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default class Swiper extends SuperComponent {

options = {
multipleSlots: true,
pureDataPattern: /^_/,
};

properties = props;
Expand All @@ -38,6 +39,7 @@ export default class Swiper extends SuperComponent {
data = {
prefix,
classPrefix: name,
_source: '', // 触发源
};

lifetimes = {
Expand Down Expand Up @@ -71,13 +73,22 @@ export default class Swiper extends SuperComponent {
onChange(e) {
const { current, source } = e.detail;

if (!source) return;

this.setData({
navCurrent: current,
_source: source,
});

this.triggerEvent('change', { current, source });
},

onAnimationFinish(e: WechatMiniprogram.SwiperAnimationFinish) {
const { current, source } = e.detail;

this.triggerEvent('animationfinish', { current, source: source || this.data._source });
},

onNavBtnChange(e) {
const { dir, source } = e.detail;

Expand All @@ -99,6 +110,7 @@ export default class Swiper extends SuperComponent {

this.setData({
current: nextPos,
_source: source,
});
this.triggerEvent('change', { current: nextPos, source });
},
Expand Down
1 change: 1 addition & 0 deletions packages/components/swiper/swiper.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
display-multiple-items="{{displayMultipleItems}}"
style="height: {{_.addUnit(height)}}"
bindchange="onChange"
bindanimationfinish="onAnimationFinish"
>
<swiper-item
wx:for="{{list}}"
Expand Down
Loading