feat: 优化tabs 组件tab-content自适应高度

Author: linxz

components/tabs/index.md

@@ -18,7 +18,7 @@
 | onPlusClick | ‘+’icon被点击时的回调 | () => {} |  | false |
 | onTabClick | tab 被点击的回调 | (index: Number) => void | | false |
 | onChange | tab变化时触发 | (index: Number) => void | | false |
-| swipeable | 是否可以滑动内容切换 | Boolean | true | false |
+| swipeable | 是否可以滑动内容切换，同时可控制高度是否自适应 | Boolean | true | false |
 | duration | 当swipeable为true时滑动动画时长，单位ms | Number | 500(ms) | false |
 | tabBarBackgroundColor | tabBar背景色 | String | | false |
 | tabBarActiveTextColor | tabBar激活Tab文字颜色 | String | | false |
@@ -34,6 +34,17 @@
 | 属性名 | 描述 | 类型 | 默认值 | 必选 |
 | ---- | ---- | ---- | ---- | ---- |
 | index | 列表项的唯一索引 | String | | | |
+| tabId | tab 内容序列索引 | Number | {{index}} | | |
+| activeTab | 选项卡当前激活序列索引 | Number | {{activeTab}} | | |
+
+## tab-content 高度自适应说明
+
+tabs 组件内容区域高度是否能够自适应，需要注意 `swipeable` 的值：
+
+* `swipeable='{{true}}'`：内容区域可滑动，且相对应 tab 标签卡；但**内容区域高度为固定值**，需要在 acss 文件中设定 `height` 值，否则高度会异常；
+* `swipeable='{{false}}'`：内容区域不可滑动，此时高度表现形式有两种，且可以不需要在 acss 文件设定 `height` 值；
+  * `<tab-content>` 中**无** `tabId` 和 `activeTab` 两个属性，此时的高度将以所有内容区域中最高的为基准展示；
+  * `<tab-content>` 中**包含** `tabId` 和 `activeTab` 两个属性时 `tabId="{{index}}" activeTab="{{activeTab}}"`，内容区域所展示的高度将会随着不同模块的高度而改变；
 
 ## 示例
 
@@ -56,9 +67,16 @@
     onChange="handleTabChange"
     onPlusClick="handlePlusClick"
     activeTab="{{activeTab}}"
+    swipeable="{{false}}"
   >
     <block a:for="{{tabs}}">
-      <tab-content key="{{index}}">
+      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:if="{{index === 1}}">
+        <view class="tab-content" style="height: 100px;">高度为 100px {{item.title}}</view>
+      </tab-content>
+      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:elif="{{index === 2}}">
+        <view class="tab-content" style="height: 200px;">改变 tab-content 高度为 200px {{item.title}}</view>
+      </tab-content>
+      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:else>
         <view class="tab-content">content of {{item.title}}</view>
       </tab-content>
     </block>
@@ -108,6 +126,8 @@ Page({
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 300px;
+  padding: 40rpx;
+  /* 如果 swipeable="{{true}}"，需要增加 height */
+  /* height: 350px; */
 }
 ```

components/tabs/tab-content/index.axml

@@ -1,3 +1,6 @@
-<swiper-item style="{{style}}" class="am-tabs-pane-wrap" key="tabs-pane-{{key}}">
+<swiper-item a:if="{{style}}" style="{{style}}" class="am-tabs-pane-wrap" key="tabs-pane-{{key}}">
   <slot></slot>
 </swiper-item>
+<view a:else style="{{tabId !== '' && activeTab !== '' ? tabId === activeTab?'':'height: 0px;' : ''}}" class="am-tabs-pane-wrap" key="tabs-pane-{{key}}">
+  <slot></slot>
+</view>

components/tabs/tab-content/index.ts

@@ -1,3 +1,6 @@
 Component({
-
+  props: {
+    tabId: '',
+    activeTab: '',
+  },
 });