diff --git a/packages/components/swiper/README.en-US.md b/packages/components/swiper/README.en-US.md index 8663a0b64..711413b34 100644 --- a/packages/components/swiper/README.en-US.md +++ b/packages/components/swiper/README.en-US.md @@ -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 @@ -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)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
+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)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
click | `(index: number)` | `0.34.0` image-load | `(index: number)` | `1.1.4` + ### Swiper External Classes className | Description @@ -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 @@ -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 | - \ No newline at end of file diff --git a/packages/components/swiper/README.md b/packages/components/swiper/README.md index c59483e86..e462986a9 100644 --- a/packages/components/swiper/README.md +++ b/packages/components/swiper/README.md @@ -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 @@ -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)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
+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)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
click | `(index: number)` | `0.34.0`。点击轮播项时触发 image-load | `(index: number)` | `1.1.4`。图片加载时触发 + ### Swiper External Classes 类名 | 描述 @@ -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 类名 | 描述 @@ -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 | - \ No newline at end of file diff --git a/packages/components/swiper/swiper.ts b/packages/components/swiper/swiper.ts index f9539b3db..8094ff4fc 100644 --- a/packages/components/swiper/swiper.ts +++ b/packages/components/swiper/swiper.ts @@ -17,6 +17,7 @@ export default class Swiper extends SuperComponent { options = { multipleSlots: true, + pureDataPattern: /^_/, }; properties = props; @@ -38,6 +39,7 @@ export default class Swiper extends SuperComponent { data = { prefix, classPrefix: name, + _source: '', // 触发源 }; lifetimes = { @@ -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; @@ -99,6 +110,7 @@ export default class Swiper extends SuperComponent { this.setData({ current: nextPos, + _source: source, }); this.triggerEvent('change', { current: nextPos, source }); }, diff --git a/packages/components/swiper/swiper.wxml b/packages/components/swiper/swiper.wxml index acc79a3d1..c6a35dac1 100644 --- a/packages/components/swiper/swiper.wxml +++ b/packages/components/swiper/swiper.wxml @@ -19,6 +19,7 @@ display-multiple-items="{{displayMultipleItems}}" style="height: {{_.addUnit(height)}}" bindchange="onChange" + bindanimationfinish="onAnimationFinish" >