feat(swiper): support the swiper adjustHeight attribute (#117)

* feat(swiper): support the swiper adjustHeight attribute * feat(Tabs): support more swiper related props * chore(doc): Loading add chinese name Co-authored-by: 彧衡 <[email protected]> Co-authored-by: 陌缓 <[email protected]>
ant-design · May 30, 2022 · a050b6b · a050b6b
1 parent 2850698
commit a050b6b
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 49 deletions.
diff --git a/docs/guide/cooperation.md b/docs/guide/cooperation.md
@@ -24,7 +24,7 @@ antd-mini 的发展离不开社区的每一位用户，这里有一些信息可
 
 - 设备信息、客户端版本、组件库版本、组件等
 - 你期望的组件行为是什么，实际上组件的行为是什么
-- 详细描述复习步骤
+- 详细描述复现步骤
 - 尽可能提供能够复现 demo 以方便我们快速定位问题
 
 ### 贡献代码

diff --git a/src/Loading/index.md b/src/Loading/index.md
@@ -6,8 +6,8 @@ group:
 toc: false
 ---
 
-# Loading
-加载，用于提示局部或页面在加载中。
+# Loading 加载
+用于提示局部或页面在加载中。
 
 ## 代码示例
 ### 基本使用

diff --git a/src/Tabs/index.axml b/src/Tabs/index.axml
@@ -74,7 +74,13 @@
         disable-update-direction="{{true}}"
         id="amd-tabs-content-{{$id}}"
         class="amd-tabs-content {{_tabContentHeight ? 'amd-tabs-content_H100': ''}}"
-        adjust-height='current'
+        adjust-height="{{adjustHeight}}"
+        active-class="{{activeClass}}"
+        previous-margin="{{previousMargin}}"
+        next-margin="{{nextMargin}}"
+        easing-function="{{easingFunction}}"
+        snap-to-edge="{{snapToEdge}}"
+        onAnimationEnd="handleAnimationEnd"
         onChange="handleSwiperChange"
         onTouchStart="handleSwiperTouchStart"
         onTransition="handleSwiperTransition"

diff --git a/src/Tabs/index.md b/src/Tabs/index.md
@@ -30,17 +30,23 @@ toc: false
 #### Tabs
 | 属性 | 类型 | 必填 | 默认值 | 说明 |
 | -----|-----|-----|-----|----- |
-| type | 'basis' &verbar; 'capsule' &verbar; 'mixin' &verbar; 'title' | 否 | 'basis' | 类型，basis(基础)，capsule(胶囊)，mixin(混合) |
-| index | number | 否 | 0 | 当前激活的索引 |
+| adjustHeight | string | 否 | 'current' | 自动以指定滑块的高度为整个容器的高度 |
+| activeClass | string | 否 |  ''  |  swiper-item 可见时的 class |
 | animation | boolean | 否 | false | 是否有过渡动画 |
-| swipeable | boolean | 否 | false | 是否支持手势切换 |
+| className | string | 否 | - | 类名 |
+| easingFunction | string  | 否 | 'default' | 切换缓动动画类型 |
+| index | number | 否 | 0 | 当前激活的索引 |
+| nextMargin | string  | 否 | '0px' | 后边距，单位 px，1.9.0 暂时只支持水平方向 |
+| plus | string &verbar; slot | 否 | - | 右上角操作按钮，自定义节点 |
+| previousMargin | string  | 否 | '0px' | 前边距，单位 px，1.9.0 暂时只支持水平方向 |
+| snapToEdge | boolean  | 否 | false | 当 swiper-item 个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 时，可以指定这个边距是否应用到第一个、最后一个元素 |
 | sticky | boolean | 否 | false | 是否支持吸顶 |
-| touchAngle | number | 否 | 45 | 用户左右滑动手势生效的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高 |
 | swipeRatio | number | 否 | 0.2 | 用户左右滑动手势触发切换的阈值，当滑动距离超过阈值时进行 `swiper-item` 切换 |
 | swipeSpeed | number | 否 | 0.05 | 用户左右滑动手势对应的滑动距离，数值越小则需要用户手势相同位移下 `swiper-item` 位移越小 |
-| plus | string &verbar; slot | 否 | - | 右上角操作按钮，自定义节点 |
+| swipeable | boolean | 否 | false | 是否支持手势切换 |
 | title | slot-scope | 否 | - | 自定义 tab 标题样式，仅在 type 为 basis 时可用 |
-| className | string | 否 | - | 类名 |
+| touchAngle | number | 否 | 45 | 用户左右滑动手势生效的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高 |
+| type | 'basis' &verbar; 'capsule' &verbar; 'mixin' &verbar; 'title' | 否 | 'basis' | 类型，basis(基础)，capsule(胶囊)，mixin(混合) |
 
 #### TabItem
 | 属性 | 类型 | 必填 | 默认值 | 说明 |
@@ -54,6 +60,9 @@ toc: false
 | 事件名 | 说明 | 类型 |
 | -----|-----|-----|
 | onChange | 面板切换时候，触发回调 |(index: number) => void|
+| onAnimationEnd | 内部 swiper 组件的 onAnimationEnd 事件（仅在基础库 1.50.0 以上版本生效）|(e: any) => void=> void|
+| onTouchStart | 内部 swiper 组件的 onTouchStart 事件（仅在基础库 2.x 版本生效） |(e: any) => void|
+| onTransition | 内部 swiper 组件的 onTransition 事件（仅在基础库 2.x 版本生效） |(e: any) => void|
 
 ## 插槽
 #### Tabs
@@ -101,28 +110,28 @@ toc: false
 
 
 <style> 
-table th:first-of-type { width: 180px; } 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2)  {
-    width: 140px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3)  {
-    width: 30px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4)  {
-    width: 50px
-} 
-.__dumi-default-layout-content article table:nth-of-type(2) th:nth-of-type(2)  {
-    width: 140px
-} 
-.__dumi-default-layout-content article table:nth-of-type(2) th:nth-of-type(3)  {
-    width: 30px
-} 
-.__dumi-default-layout-content article table:nth-of-type(2) th:nth-of-type(4)  {
-    width: 50px
-} 
-.__dumi-default-layout-content article table:nth-of-type(6) th:nth-of-type(2)  {
-    width: 300px
-} 
+table th:first-of-type { width: 180px; }
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2) {
+    width: 140px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3) {
+    width: 30px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4) {
+    width: 50px;
+}
+.__dumi-default-layout-content article table:nth-of-type(2) th:nth-of-type(2) {
+    width: 140px;
+}
+.__dumi-default-layout-content article table:nth-of-type(2) th:nth-of-type(3) {
+    width: 30px;
+}
+.__dumi-default-layout-content article table:nth-of-type(2) th:nth-of-type(4) {
+    width: 50px;
+}
+.__dumi-default-layout-content article table:nth-of-type(6) th:nth-of-type(2) {
+    width: 300px;
+}
 .__dumi-default-mobile-previewer:nth-of-type(2)::after {
     border-bottom: none!important;
 }

diff --git a/src/Tabs/index.ts b/src/Tabs/index.ts
@@ -260,6 +260,12 @@ Component({
         onTransition(e)
       }
     },
+    handleAnimationEnd(e) {
+      const { onAnimationEnd } = this.props;
+      if (typeof onAnimationEnd === "function") {
+        onAnimationEnd(e)
+      }
+    },
     appearLeft() {
       this.setData({
         _leftFade: false,

diff --git a/src/Tabs/props.d.ts b/src/Tabs/props.d.ts
@@ -10,69 +10,123 @@ export interface ITabsProps extends IBaseProps {
    * @default "basis"
    */
   uid: string;
+
+  /**
+   * @description 自动以指定滑块的高度为整个容器的高度
+   * @default 'current'
+   */
+  adjustHeight: 'first' | 'current' | 'highest' | 'none';
+
+  /**
+   * @description swiper-item 可见时的 class
+   * @default ''
+   */
+  activeClass: string;
+
+  /**
+   * @description 前边距，单位 px，1.9.0 暂时只支持水平方向。
+   * @default '0px'
+   */
+  previousMargin: string;
+
+  /**
+   * @description 后边距，单位 px，1.9.0 暂时只支持水平方向。
+   * @default '0px'
+   */
+  nextMargin: string;
+
+  /**
+   * @description 切换缓动动画类型。
+   * @default 'default'
+   */
+  easingFunction: string;
+
+  /**
+   * @description 当 swiper-item 个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 时，可以指定这个边距是否应用到第一个、最后一个元素。
+   * @default false
+   */
+  snapToEdge: boolean;
+
   /**
    * @description 类型，basis(基础)，capsule(胶囊)，mixin(混合)
    * @default "basis"
    */
   type?: 'basis' | 'capsule' | 'mixin';
+
   /**
    * @description 当前激活的索引
    * @default 0
    */
   index?: number;
-  /**
-   * @description tab 切换时的回调
-   */
-  onChange?: (index: number) => void;
+
   /**
    * @description 是否有过渡动画
    * @default false
    */
   animation?: boolean;
+
   /**
    * @description 是否支持手势切换
    * @default false
    */
   swipeable?: boolean;
+
   /**
    * @description 是否支持吸顶
    * @default false
    */
   sticky?: boolean;
+
   /**
    * @description 吸顶高度
    * @default 0
    */
   stickyTop?: boolean;
-  /**
-   * @description 内部 swiper 组件的 onTouchStart 事件（仅在基础库 2.x 版本生效）
-   * @default 0
-   */
-  onTouchStart?: (e:any) => void;
-  /**
-   * @description 内部 swiper 组件的 onTouchStart 事件（仅在基础库 2.x 版本下生效）
-   * @default 0
-   */
-  onTransition?: (e:any) => void;
+
   /**
    * @description 是否自定义实现"轮播"，详见 fallback demo
    * @default 0
    */
   fallback?: boolean;
+
   /**
    * @description 用户左右滑动手势生效的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高
    * @default 45
    */
   touchAngle?: number;
+
   /**
    * @description 用户左右滑动手势触发切换的阈值，当滑动距离超过阈值时进行 `swiper-item` 切换
    * @default 0.2
    */
-  swipeRatio?: number
+  swipeRatio?: number;
+
   /**
    * @description 用户左右滑动手势对应的滑动距离，数值越小则需要用户手势相同位移下 `swiper-item` 位移越小
    * @default 0.05
    */
-  swipeSpeed?: number
+  swipeSpeed?: number;
+
+  /**
+   * @description tab 切换时的回调
+   */
+  onChange?: (index: number) => void;
+
+  /**
+   * @description 内部 swiper 组件的 onTouchStart 事件（仅在基础库 2.x 版本生效）
+   * @default 0
+   */
+  onTouchStart?: (e: any) => void;
+
+  /**
+   * @description 内部 swiper 组件的 onTransition 事件（仅在基础库 2.x 版本下生效）
+   * @default 0
+   */
+  onTransition?: (e: any) => void;
+
+  /**
+   * @description 内部 swiper 组件的 onAnimationEnd 事件（仅在基础库 1.50.0 以上版本生效）
+   */
+  onAnimationEnd?: (e: any) => void;
 }
 export declare const TabsDefaultProps: Partial<ITabsProps>;
diff --git a/src/Tabs/props.js b/src/Tabs/props.js
@@ -1,5 +1,6 @@
 export const TabsDefaultProps = {
   type: 'basis',
+  adjustHeight: 'current',
   index: 0,
   animation: false,
   swipeable: false,
@@ -10,5 +11,10 @@ export const TabsDefaultProps = {
   swipeRatio: 0.2,
   swipeSpeed: 0.05,
   onGetRef: () => {},
-  uid: 'tabs'
+  uid: 'tabs',
+  activeClass: '',
+  previousMargin: '0px',
+  nextMargin: '0px',
+  easingFunction: 'default',
+  snapToEdge: false
 };