Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

perf(diy-tab): optimize tab rendering with v-if

Browse Source
This commit is contained in:
ZF Sun
2026-05-07 16:14:28 +08:00
parent e125a5f39c
commit 9ec90a906f
1 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components-diy/diy-tab.vue
View File

@@ -30,12 +30,14 @@
<!-- 内容区域 -->
<view class="tab-content" :style="[contentStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)"
class="tab-panel"
:class="{ active: activeTab === idx }"
v-if="activeTab === idx"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
<!-- 渲染每个标签下的组件 -->
<diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
<diy-group :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
:scrollTop="tab.scrollTop || 0" />
</view>
</view>
@@ -46,12 +48,14 @@
<template v-else-if="mergedValue.tabPosition === 'bottom'">
<!-- 内容区域 -->
<view class="tab-content" :style="[contentStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)"
class="tab-panel"
:class="{ active: activeTab === idx }"
v-if="activeTab === idx"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
<!-- 渲染每个标签下的组件 -->
<diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
<diy-group :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
:scrollTop="tab.scrollTop || 0" />
</view>
</view>
@@ -110,12 +114,14 @@
<!-- 右侧内容区域 -->
<view class="tab-content" :style="[contentStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)"
class="tab-panel"
:class="{ active: activeTab === idx }"
v-if="activeTab === idx"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
<!-- 渲染每个标签下的组件 -->
<diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
<diy-group :diyData="{ value: tab.components, global: diyGlobal }"
:scrollTop="tab.scrollTop || 0" />
</view>
</view>
@@ -128,12 +134,14 @@
<view class="tab-layout-horizontal">
<!-- 左侧内容区域 -->
<view class="tab-content" :style="[contentStyle]">
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)"
class="tab-panel"
:class="{ active: activeTab === idx }"
v-if="activeTab === idx"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
<!-- 渲染每个标签下的组件 -->
<diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
<diy-group :diyData="{ value: tab.components, global: diyGlobal }"
:scrollTop="tab.scrollTop || 0" />
</view>
</view>
@@ -1135,7 +1143,6 @@ export default {
// ===== 标签面板样式 =====
.tab-panel {
display: none;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
@@ -1143,10 +1150,10 @@ export default {
box-sizing: border-box;
width: 100%;
min-height: 200px;
// 显示/隐藏由 v-show 控制，不使用 display: none
// 激活状态
&.active {
display: block;
opacity: 1;
transform: translateY(0);
transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);