fix(tabs): 修复tab-panel高度变化影响内部组件问题

fix Tencent#2441
hkaikai · Aug 7, 2024 · 2c59a31 · 2c59a31
1 parent df2e357
commit 2c59a31
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/src/tab-panel/tab-panel.wxml b/src/tab-panel/tab-panel.wxml
@@ -2,7 +2,7 @@
 
 <view
   class="class {{prefix}}-class {{classPrefix}} {{active ? prefix + '-is-active': ''}}"
-  style="{{_._style([style, customStyle, (hide ? 'height: 0' : '')])}}"
+  style="{{_._style([style, customStyle, (hide ? 'display: none' : '')])}}"
   id="{{id}}"
   aria-role="tabpanel"
 >

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

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

diff --git a/src/tabs/_example/with-content/index.wxss b/src/tabs/_example/with-content/index.wxss
@@ -3,6 +3,6 @@
 }
 
 .custom-panel {
-  height: 120px;
+  height: 120px !important;
   color: var(--td-text-color-primary);
 }