fix(material-list): 修复切换标签时列表渲染异常问题
通过添加 v-if 和 key 强制重新渲染列表,避免切换标签时 Vue 复用组件导致的显示异常
Showing
1 changed file
with
13 additions
and
2 deletions
| ... | @@ -38,7 +38,11 @@ | ... | @@ -38,7 +38,11 @@ |
| 38 | </nut-tabs> | 38 | </nut-tabs> |
| 39 | 39 | ||
| 40 | <!-- 列表容器(独立于 nut-tab-pane) --> | 40 | <!-- 列表容器(独立于 nut-tab-pane) --> |
| 41 | - <view class="flex-1 min-h-0 overflow-y-auto px-[32rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border"> | 41 | + <view |
| 42 | + v-if="listVisible" | ||
| 43 | + :key="listRenderKey" | ||
| 44 | + class="flex-1 min-h-0 overflow-y-auto px-[32rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border" | ||
| 45 | + > | ||
| 42 | <view class="flex flex-col gap-[24rpx]"> | 46 | <view class="flex flex-col gap-[24rpx]"> |
| 43 | <view v-for="(item, index) in currentList" :key="index" | 47 | <view v-for="(item, index) in currentList" :key="index" |
| 44 | class="material-item bg-white rounded-[24rpx] p-[24rpx] shadow-sm transition-all duration-200 border border-gray-50 flex flex-row" | 48 | class="material-item bg-white rounded-[24rpx] p-[24rpx] shadow-sm transition-all duration-200 border border-gray-50 flex flex-row" |
| ... | @@ -95,7 +99,7 @@ | ... | @@ -95,7 +99,7 @@ |
| 95 | </template> | 99 | </template> |
| 96 | 100 | ||
| 97 | <script setup> | 101 | <script setup> |
| 98 | -import { ref, computed } from 'vue' | 102 | +import { ref, computed, nextTick } from 'vue' |
| 99 | import { useLoad } from '@tarojs/taro' | 103 | import { useLoad } from '@tarojs/taro' |
| 100 | import NavHeader from '@/components/NavHeader.vue' | 104 | import NavHeader from '@/components/NavHeader.vue' |
| 101 | import SearchBar from '@/components/SearchBar.vue' | 105 | import SearchBar from '@/components/SearchBar.vue' |
| ... | @@ -106,6 +110,8 @@ import Taro from '@tarojs/taro' | ... | @@ -106,6 +110,8 @@ import Taro from '@tarojs/taro' |
| 106 | 110 | ||
| 107 | const searchValue = ref('') | 111 | const searchValue = ref('') |
| 108 | const activeTabId = ref('') | 112 | const activeTabId = ref('') |
| 113 | +const listVisible = ref(true) | ||
| 114 | +const listRenderKey = ref(0) | ||
| 109 | 115 | ||
| 110 | /** | 116 | /** |
| 111 | * 页面标题 | 117 | * 页面标题 |
| ... | @@ -353,6 +359,11 @@ useLoad((options) => { | ... | @@ -353,6 +359,11 @@ useLoad((options) => { |
| 353 | */ | 359 | */ |
| 354 | const onTabClick = (id) => { | 360 | const onTabClick = (id) => { |
| 355 | activeTabId.value = id | 361 | activeTabId.value = id |
| 362 | + listVisible.value = false | ||
| 363 | + nextTick(() => { | ||
| 364 | + listRenderKey.value += 1 | ||
| 365 | + listVisible.value = true | ||
| 366 | + }) | ||
| 356 | // 可以在这里触发加载逻辑 | 367 | // 可以在这里触发加载逻辑 |
| 357 | // loadMaterialsByCategory(id) | 368 | // loadMaterialsByCategory(id) |
| 358 | } | 369 | } | ... | ... |
-
Please register or login to post a comment