@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/swiper/README.en-US.md

@@ -0,0 +1,89 @@
+:: BASE_DOC ::
+
+## API
+
+### Swiper Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+autoplay | Boolean | true | \- | N
+current | Number | 0 | \- | N
+direction | String | horizontal | options: horizontal/vertical | N
+display-multiple-items | Number | 1 | \- | N
+duration | Number | 300 | \- | N
+easing-function | String | default | options: default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
+height | String / Number | 192 | \- | N
+image-props | Object | {} | \- | N
+interval | Number | 5000 | \- | N
+list | Array | - | Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swiper/type.ts) | N
+loop | Boolean | true | \- | N
+navigation | Boolean / Object | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swiper/type.ts) | N
+next-margin | String / Number | 0 | \- | N
+pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+previous-margin | String / Number | 0 | \- | N
+snap-to-edge | Boolean | false | \- | N
+
+### Swiper Events
+
+name | params | description
+-- | -- | --
+animationfinish | `(context: { current: number, source: SwiperChangeSource })` | 动画结束时会触发 animationfinish 事件
+change | `(context: { current: number, source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
+click | `(context: { index: number })` | \-
+image-load | `(context: { index: number})` | \-
+
+### Swiper Slots
+
+name | Description
+-- | --
+navigation | \-
+
+### Swiper External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-image | \-
+t-class-nav | \-
+t-class-next-image | \-
+t-class-prev-image | \-
+
+
+### SwiperNav Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+current | Number | 0 | \- | N
+direction | String | horizontal | options: horizontal/vertical | N
+min-show-num | Number | 2 | \- | N
+pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+show-controls | Boolean | false | \- | N
+total | Number | 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/packages/uniapp-components/swiper-nav/type.ts) | N
+
+### SwiperNav External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-swiper-item-padding | 0 | -
+--td-swiper-radius | @radius-large | -
+--td-swiper-nav-btn-bg-color | @font-gray-3 | -
+--td-swiper-nav-btn-color | @text-color-anti | -
+--td-swiper-nav-btn-size | 48rpx | -
+--td-swiper-nav-dot-active-color | @text-color-anti | -
+--td-swiper-nav-dot-color | @font-white-2 | -
+--td-swiper-nav-dot-size | 12rpx | -
+--td-swiper-nav-dots-bar-active-width | 40rpx | -
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
+--td-swiper-nav-fraction-color | @text-color-anti | -
+--td-swiper-nav-fraction-font | @font-body-small | -
+--td-swiper-nav-fraction-height | 48rpx | -

package/dist/swiper/README.md

@@ -0,0 +1,139 @@
+---
+title: Swiper 轮播图
+description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSwiper from '@tdesign/uniapp/swiper/swiper.vue';
+import TSwiperNav from '@tdesign/uniapp/swiper-nav/swiper-nav.vue';
+```
+### 组件说明
+
+从 `0.32.0` 版本开始，依赖原生 `swiper` 组件实现，移除了 `swiper-item` 组件，新增了 `list` 属性；
+
+## 代码演示
+
+多种轮播样式，通过 `navigation` 设置导航样式，没有值则不显示，也可以自定义 `nav` 组件
+
+### 组件类型
+
+#### 点状（dots）轮播图
+
+{{ base }}
+
+#### 点条状（dots-bar）轮播图
+
+{{ custom }}
+
+#### 分式（fraction）导航器轮播图
+
+{{ fraction }}
+
+#### 切换按钮（controls）轮播图
+
+{{ nav-btn }}
+
+#### 卡片式（cards）轮播图
+
+{{ cards }}
+
+### 组件样式
+
+#### 垂直模式
+
+{{ vertical }}
+
+## API
+
+### Swiper Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+autoplay | Boolean | true | 是否自动播放 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+display-multiple-items | Number | 1 | 同时显示的滑块数量 | N
+duration | Number | 300 | 滑动动画时长 | N
+easing-function | String | default | 指定 swiper 切换缓动动画类型。可选项：default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
+height | String / Number | 192 | 轮播的高度；默认单位 `px` | N
+image-props | Object | {} | 透传至 Image 组件 | N
+interval | Number | 5000 | 轮播间隔时间 | N
+list | Array | - | 图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swiper/type.ts) | N
+loop | Boolean | true | 是否循环播放 | N
+navigation | Boolean / Object | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swiper/type.ts) | N
+next-margin | String / Number | 0 | 后边距，可用于露出后一项的一小部分。默认单位 `px` | N
+pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+previous-margin | String / Number | 0 | 前边距，可用于露出前一项的一小部分。默认单位 `px` | N
+snap-to-edge | Boolean | false | 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 | N
+
+### Swiper Events
+
+名称 | 参数 | 描述
+-- | -- | --
+animationfinish | `(context: { current: number, source: SwiperChangeSource })` | 轮播切换时触发
+change | `(context: { current: number, source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
+click | `(context: { index: number })` | 点击轮播项时触发
+image-load | `(context: { index: number})` | 图片加载时触发
+
+### Swiper Slots
+
+名称 | 描述
+-- | --
+navigation | 导航器全部配置
+
+### Swiper External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-image | 当前图片样式类
+t-class-nav | 导航样式类
+t-class-next-image | 下一图片样式类
+t-class-prev-image | 上一图片样式类
+
+
+### SwiperNav Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N
+pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+show-controls | Boolean | false | 是否显示两侧的控制按钮 | N
+total | Number | 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/packages/uniapp-components/swiper-nav/type.ts) | N
+
+### SwiperNav External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-swiper-item-padding | 0 | -
+--td-swiper-radius | @radius-large | -
+--td-swiper-nav-btn-bg-color | @font-gray-3 | -
+--td-swiper-nav-btn-color | @text-color-anti | -
+--td-swiper-nav-btn-size | 48rpx | -
+--td-swiper-nav-dot-active-color | @text-color-anti | -
+--td-swiper-nav-dot-color | @font-white-2 | -
+--td-swiper-nav-dot-size | 12rpx | -
+--td-swiper-nav-dots-bar-active-width | 40rpx | -
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
+--td-swiper-nav-fraction-color | @text-color-anti | -
+--td-swiper-nav-fraction-font | @font-body-small | -
+--td-swiper-nav-fraction-height | 48rpx | -

package/dist/swiper/computed.js

@@ -0,0 +1,29 @@
+export function isPrev(current, index, list) {
+  return (current - 1 + list.length) % list.length === index;
+}
+
+export function isNext(current, index, list) {
+  return (current + 1 + list.length) % list.length === index;
+}
+
+export function getImageClass(
+  prefix,
+  current,
+  index,
+  list,
+  tClassImage,
+  tClassPrevImage,
+  tClassNextImage,
+) {
+  const arr = [`${prefix}-swiper__image-host`, `${prefix}-swiper__image`, tClassImage];
+
+  if (isPrev(current, index, list)) {
+    arr.push(tClassPrevImage);
+  }
+
+  if (isNext(current, index, list)) {
+    arr.push(tClassNextImage);
+  }
+
+  return arr.join(' ');
+}

package/dist/swiper/props.ts

@@ -0,0 +1,117 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwiperProps } from './type';
+export default {
+  /** 是否自动播放 */
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 当前轮播在哪一项（下标） */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 轮播滑动方向，包括横向滑动和纵向滑动两个方向 */
+  direction: {
+    type: String,
+    default: 'horizontal' as TdSwiperProps['direction'],
+    validator(val: TdSwiperProps['direction']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 同时显示的滑块数量 */
+  displayMultipleItems: {
+    type: Number,
+    default: 1,
+  },
+  /** 滑动动画时长 */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 指定 swiper 切换缓动动画类型 */
+  easingFunction: {
+    type: String,
+    default: 'default' as TdSwiperProps['easingFunction'],
+    validator(val: TdSwiperProps['easingFunction']): boolean {
+      if (!val) return true;
+      return ['default', 'linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'].includes(val);
+    },
+  },
+  /** 轮播的高度；默认单位 `px` */
+  height: {
+    type: [String, Number],
+    default: 192 as TdSwiperProps['height'],
+  },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 轮播间隔时间 */
+  interval: {
+    type: Number,
+    default: 5000,
+  },
+  /** 图片列表 */
+  list: {
+    type: Array,
+  },
+  /** 是否循环播放 */
+  loop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 导航器全部配置，true 的话使用默认配置 */
+  navigation: {
+    type: [Boolean, Object],
+    default: true as TdSwiperProps['navigation'],
+  },
+  /** 后边距，可用于露出后一项的一小部分。默认单位 `px` */
+  nextMargin: {
+    type: [String, Number],
+    default: 0 as TdSwiperProps['nextMargin'],
+  },
+  /** 页码信息展示位置 */
+  paginationPosition: {
+    type: String,
+    default: 'bottom' as TdSwiperProps['paginationPosition'],
+    validator(val: TdSwiperProps['paginationPosition']): boolean {
+      if (!val) return true;
+      return ['top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right', 'left', 'right'].includes(val);
+    },
+  },
+  /** 前边距，可用于露出前一项的一小部分。默认单位 `px` */
+  previousMargin: {
+    type: [String, Number],
+    default: 0 as TdSwiperProps['previousMargin'],
+  },
+  /** 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 */
+  snapToEdge: Boolean,
+  /** 轮播切换时触发 */
+  onAnimationfinish: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 轮播切换时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击轮播项时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 图片加载时触发 */
+  onImageLoad: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/swiper/swiper.css

@@ -0,0 +1,21 @@
+.t-swiper {
+  position: relative;
+}
+.t-swiper-host {
+  border-radius: var(--td-swiper-radius, var(--td-radius-large, 18rpx));
+  overflow: hidden;
+  transform: translateY(0);
+}
+.t-swiper__item {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--td-swiper-item-padding, 0);
+}
+:deep(.t-swiper__image) {
+  width: 100%;
+  transition: all 0.3s ease;
+}
+:deep(.t-swiper__image)-host {
+  width: 100%;
+}

package/dist/swiper/swiper.vue

@@ -0,0 +1,193 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="tools._style([customStyle])"
+  >
+    <swiper
+      :class="classPrefix + '-host'"
+      :autoplay="autoplay"
+      :current="current"
+      :interval="interval"
+      :duration="duration"
+      :circular="loop"
+      :vertical="direction == 'vertical'"
+      :easing-function="easingFunction"
+      :previous-margin="tools.addUnit(previousMargin)"
+      :next-margin="tools.addUnit(nextMargin)"
+      :snap-to-edge="snapToEdge"
+      :display-multiple-items="displayMultipleItems"
+      :style="'height: ' + tools.addUnit(height)"
+      @change="onChange"
+      @animationfinish="onAnimationFinish"
+    >
+      <swiper-item
+        v-for="(item, index) in list"
+        :key="index"
+        :class="
+          tools.cls(classPrefix + '__item', [
+            ['preview', isPrev(navCurrent, index, list)],
+            ['next', isNext(navCurrent, index, list)]
+          ])
+        "
+        :data-index="index"
+        :aria-hidden="navCurrent !== index"
+        aria-role="image"
+        :aria-label="tools.isObject(item) ? item.ariaLabel : ''"
+        @click="onTap($event, { index })"
+      >
+        <t-image
+          :t-class="getImageClass(prefix, navCurrent, index, list, tClassImage, tClassPrevImage, tClassNextImage)"
+          :custom-style="'height: ' + tools.addUnit(height) || ''"
+          :error="imageProps.error || 'default'"
+          :lazy="imageProps.lazy || false"
+          :loading="imageProps.loading || 'default'"
+          :shape="imageProps.shape || 'square'"
+          :src="tools.isObject(item) ? item.value : item"
+          :mode="imageProps.mode || 'aspectFill'"
+          :webp="imageProps.webp || false"
+          :show-menu-by-longpress="imageProps.showMenuByLongpress || false"
+          @load="onImageLoad($event, { custom: index || null })"
+        />
+      </swiper-item>
+    </swiper>
+    <t-swiper-nav
+      v-if="navigation"
+      :t-class="tClassNav"
+      :type="navigation.type || 'dots'"
+      :current="navCurrent || 0"
+      :total="list.length || 0"
+      :direction="direction || 'horizontal'"
+      :pagination-position="paginationPosition || 'bottom'"
+      :min-show-num="navigation.minShowNum || 2"
+      :show-controls="navigation.showControls || false"
+      @nav-btn-change="onNavBtnChange"
+    />
+    <slot name="navigation" />
+    <slot name="nav" />
+  </view>
+</template>
+<script>
+import TSwiperNav from '../swiper-nav/swiper-nav';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { isPrev, isNext, getImageClass } from './computed.js';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-swiper`;
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`, `${prefix}-class-nav`, `${prefix}-class-image`, `${prefix}-class-prev-image`, `${prefix}-class-next-image`],
+  mixins: [ParentMixin(RELATION_MAP.SwiperNav)],
+  components: {
+    TSwiperNav,
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'change',
+    'animationfinish',
+    'image-load',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+      navCurrent: 0,
+    };
+  },
+  watch: {
+    navCurrent(t) {
+      this.updateNav(t);
+    },
+  },
+
+  mounted() {
+    this.navCurrent = this.current;
+  },
+
+  methods: {
+    isPrev,
+    isNext,
+    getImageClass,
+
+    updateNav(currentValue) {
+      if (this.navigation) return;
+      const $nav = this.getRelationNodes('./swiper-nav')?.[0];
+      if (!$nav) return;
+      const { direction, paginationPosition, list } = this;
+
+      this.current = currentValue;
+      this.total = list.length;
+      this.direction = direction;
+      this.paginationPosition = paginationPosition;
+    },
+
+    onTap(e, dataset) {
+      const { index } = dataset;
+      this.$emit('click', { index });
+    },
+
+    onChange(e) {
+      const { current, source } = e.detail;
+
+      if (!source) return;
+
+      this.navCurrent = current;
+      this.triggerSource = source;
+
+      this.$emit('change', { current, source });
+    },
+
+    onAnimationFinish(e) {
+      const { current, source } = e.detail;
+
+      this.$emit('animationfinish', { current, source: source || this.triggerSource });
+    },
+
+    onNavBtnChange(e) {
+      const { dir, source } = e;
+
+      this.doNavBtnChange(dir, source);
+    },
+
+    doNavBtnChange(dir, source) {
+      const { current, list, loop, navCurrent } = this;
+      const count = list.length;
+      let nextPos = dir === 'next' ? current + 1 : current - 1;
+
+      if (loop) {
+        nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count;
+      } else {
+        nextPos = nextPos < 0 || nextPos >= count ? current : nextPos;
+      }
+
+      if (nextPos === navCurrent) return;
+
+      this.navCurrent = nextPos;
+      this.triggerSource = source;
+
+      this.$emit('change', { current: nextPos, source });
+    },
+
+    onImageLoad(e, dataset) {
+      this.$emit('image-load', { index: dataset.custom });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './swiper.css';
+</style>

package/dist/swiper/type.ts

@@ -0,0 +1,112 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwiperNavProps as SwiperNavProps } from '../swiper-nav/type';
+
+export interface TdSwiperProps {
+  /**
+   * 是否自动播放
+   * @default true
+   */
+  autoplay?: boolean;
+  /**
+   * 当前轮播在哪一项（下标）
+   * @default 0
+   */
+  current?: number;
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   * @default horizontal
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * 同时显示的滑块数量
+   * @default 1
+   */
+  displayMultipleItems?: number;
+  /**
+   * 滑动动画时长
+   * @default 300
+   */
+  duration?: number;
+  /**
+   * 指定 swiper 切换缓动动画类型
+   * @default default
+   */
+  easingFunction?: 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic';
+  /**
+   * 轮播的高度；默认单位 `px`
+   * @default 192
+   */
+  height?: string | number;
+  /**
+   * 透传至 Image 组件
+   * @default {}
+   */
+  imageProps?: object;
+  /**
+   * 轮播间隔时间
+   * @default 5000
+   */
+  interval?: number;
+  /**
+   * 图片列表
+   */
+  list?: string[] | SwiperList[];
+  /**
+   * 是否循环播放
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * 导航器全部配置，true 的话使用默认配置
+   * @default true
+   */
+  navigation?: SwiperNavProps | boolean;
+  /**
+   * 后边距，可用于露出后一项的一小部分。默认单位 `px`
+   * @default 0
+   */
+  nextMargin?: string | number;
+  /**
+   * 页码信息展示位置
+   * @default bottom
+   */
+  paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left' | 'right';
+  /**
+   * 前边距，可用于露出前一项的一小部分。默认单位 `px`
+   * @default 0
+   */
+  previousMargin?: string | number;
+  /**
+   * 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素
+   * @default false
+   */
+  snapToEdge?: boolean;
+  /**
+   * 轮播切换时触发
+   */
+  onAnimationfinish?: (context: { current: number; source: SwiperChangeSource }) => void;
+  /**
+   * 轮播切换时触发
+   */
+  onChange?: (context: { current: number; source: SwiperChangeSource }) => void;
+  /**
+   * 点击轮播项时触发
+   */
+  onClick?: (context: { index: number }) => void;
+  /**
+   * 图片加载时触发
+   */
+  onImageLoad?: (context: { index: number }) => void;
+}
+
+export interface SwiperList {
+  value: string;
+  ariaLabel: string;
+}
+
+export type SwiperChangeSource = 'autoplay' | 'touch' | 'nav';