hookehuyr

fix(material-list): 修复切换标签时列表渲染异常问题

通过添加 v-if 和 key 强制重新渲染列表,避免切换标签时 Vue 复用组件导致的显示异常
...@@ -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 }
......