fix(tabs): resolve content overflow (#1931)

* fix(tabs): resolve content overflow * test(tabs): update snapshot
Tencent · Apr 26, 2023 · b15175d · b15175d
1 parent 066fe08
commit b15175d
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 52 deletions.
diff --git a/src/tab-panel/tab-panel.less b/src/tab-panel/tab-panel.less
@@ -5,4 +5,5 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
diff --git a/src/tabs/__test__/__snapshots__/demo.test.js.snap b/src/tabs/__test__/__snapshots__/demo.test.js.snap
@@ -389,33 +389,34 @@ exports[`Tabs Tabs with-content demo works fine 1`] = `
   <t-tabs
     defaultValue="{{0}}"
     tClass="custom-tabs"
+    tClassContent="custom-panel"
     bind:change="onTabsChange"
     bind:click="onTabsClick"
   >
     <t-tab-panel
       label="选项一"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="0"
     >
       选项一内容
     </t-tab-panel>
     <t-tab-panel
       label="选项二"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="1"
     >
       选项二内容
     </t-tab-panel>
     <t-tab-panel
       label="选项三"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="2"
     >
       选项三内容
     </t-tab-panel>
     <t-tab-panel
       label="选项四"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="3"
     >
       选项四内容

diff --git a/src/tabs/_example/with-content/index.js b/src/tabs/_example/with-content/index.js
@@ -1,6 +1,6 @@
 Component({
   data: {
-    tabPanelstyle: 'display:flex;justify-content:center;align-items:center;min-height: 120px',
+    tabPanelstyle: 'display:flex;justify-content:center;align-items:center;',
   },
   methods: {
     onTabsChange(event) {

diff --git a/src/tabs/_example/with-content/index.wxml b/src/tabs/_example/with-content/index.wxml
@@ -1,4 +1,10 @@
-<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
+<t-tabs
+  defaultValue="{{0}}"
+  bind:change="onTabsChange"
+  bind:click="onTabsClick"
+  t-class="custom-tabs"
+  t-class-content="custom-panel"
+>
   <t-tab-panel label="选项一" value="0" style="{{tabPanelstyle}}">选项一内容</t-tab-panel>
   <t-tab-panel label="选项二" value="1" style="{{tabPanelstyle}}">选项二内容</t-tab-panel>
   <t-tab-panel label="选项三" value="2" style="{{tabPanelstyle}}">选项三内容</t-tab-panel>

diff --git a/src/tabs/_example/with-content/index.wxss b/src/tabs/_example/with-content/index.wxss
@@ -1,3 +1,7 @@
 .custom-tabs {
   margin-bottom: 32rpx;
 }
+
+.custom-panel {
+  height: 120px;
+}
diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less
@@ -32,6 +32,7 @@
   position: relative;
   font-size: @tab-font-size;
   background: @tab-nav-bg-color;
+  flex-wrap: wrap;
 
   &__wrapper {
     display: flex;
@@ -56,6 +57,7 @@
     box-sizing: border-box;
     white-space: nowrap;
     overflow: hidden;
+    height: @tab-item-height;
 
     &--active {
       font-weight: 600;
@@ -70,11 +72,6 @@
       flex: 1;
     }
 
-    &--top,
-    &--bottom {
-      height: @tab-item-height;
-    }
-
     &-inner {
       display: flex;
       align-items: center;
@@ -187,56 +184,37 @@
     z-index: 1;
     transition-duration: 0.3s;
     background-color: @tab-track-color;
-
-    &--top,
-    &--bottom {
-      left: 0;
-      bottom: 1rpx;
-      width: @tab-track-width;
-      height: @tab-track-thickness;
-      border-radius: @tab-track-radius;
-    }
+    left: 0;
+    bottom: 1rpx;
+    width: @tab-track-width;
+    height: @tab-track-thickness;
+    border-radius: @tab-track-radius;
   }
 
   &__scroll {
+    position: relative;
+    height: @tab-item-height;
+    .border(bottom, @tab-border-color);
+
     &::-webkit-scrollbar {
       display: none;
     }
-
-    &--top,
-    &--bottom {
-      height: @tab-item-height;
-      position: relative;
-    }
-
-    &--top {
-      .border(bottom, @tab-border-color);
-    }
   }
 
-  &__content-inner {
-    display: block;
-  }
+  &__content {
+    width: 100%;
 
-  &--top,
-  &--bottom {
-    flex-wrap: wrap;
+    &-inner {
+      display: block;
+    }
 
-    .@{prefix}-tabs__content {
+    &--animated .@{prefix}-tabs__content-inner {
+      position: relative;
       width: 100%;
-
-      &--animated .@{prefix}-tabs__content-inner {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        will-change: left;
-        transition-property: transform;
-      }
+      height: 100%;
+      display: flex;
+      will-change: left;
+      transition-property: transform;
     }
   }
-
-  &--bottom {
-    flex-direction: column-reverse;
-  }
 }
diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
@@ -15,7 +15,13 @@ export interface TabsProps extends TdTabsProps {}
 export default class Tabs extends SuperComponent {
   behaviors = [touch];
 
-  externalClasses = [`${prefix}-class`, `${prefix}-class-item`, `${prefix}-class-active`, `${prefix}-class-track`];
+  externalClasses = [
+    `${prefix}-class`,
+    `${prefix}-class-item`,
+    `${prefix}-class-active`,
+    `${prefix}-class-track`,
+    `${prefix}-class-content`,
+  ];
 
   relations: RelationsOptions = {
     '../tab-panel/tab-panel': {

diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
@@ -66,7 +66,7 @@
     bind:touchcancel="onTouchEnd"
   >
     <view
-      class="{{classPrefix}}__content-inner"
+      class="{{classPrefix}}__content-inner {{prefix}}-class-content"
       style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex, direction}) }}"
     >
       <slot />