很多 uni-app 开发者都会遇到同一个疑难 Bug 快速切换 Tab、页面跳转、返回上一页时页面出现高度塌陷、空白、列表闪烁、内容忽隐忽现。复现路径页面发起网络请求不等接口返回立刻切换页面新页面渲染完成旧页面异步数据返回造成视图变量错乱布局高度瞬间归零又撑开。大量新手只会单纯加loading治标不治本。本文由浅入深分层给出CSS 兜底、请求锁、终止 pending 请求、生命周期规范、状态管控整套企业级解决方案彻底根除塌陷问题。一、现象表现与底层根因1.1 典型现象页面切换瞬间页面空白、列表塌陷几秒后数据加载才恢复高度Tab 来回切换列表内容错乱、新旧数据互相覆盖返回上一页页面高度收缩出现大片空白区域偶发页面渲染完成但是 DOM 容器高度为 0视觉塌陷。1.2 四大核心根源① 请求竞态Race Condition最主要元凶用户进入页面 A发起接口请求在请求未响应时快速跳转到页面 B。 页面 A 实例如果被销毁 / 隐藏未终止的异步请求依然会执行回调修改已经脱离视图的响应式变量触发 Vue 异常渲染布局时序错乱直接塌陷。TabBar 页面使用switchTab切换页面不会触发 onUnload只会执行 onHide页面实例常驻内存堆积大量未完成请求问题更容易复现。② 生命周期滥用无脑在 onShow 调用接口onLoad只执行一次onShow每次页面可见都会执行。 很多开发者把所有数据请求写在onShow频繁切换页面会连续发起多轮请求前后请求返回时序不可控旧请求覆盖新数据视图剧烈抖动塌陷。③ 缺少布局兜底无数据时容器高度坍塌列表容器没有最小高度list []时 DOM 节点全部消失容器高度变为 0数据返回后重新渲染肉眼可见塌陷、跳动。④ 缺少请求状态锁短时间重复发起请求频繁切换 Tab、快速返回页面短时间重复调用接口多个请求并发数据互相覆盖页面状态混乱。二、分层解决方案由易到难建议全部落地方案 1CSS 布局兜底快速缓解治标核心思路无论数据是否加载成功页面容器维持最小高度避免高度归零塌陷。仅作为辅助手段无法解决请求竞态带来的数据错乱。template view classpage-wrap !-- 页面内容区域 -- /view /template style scoped .page-wrap { /* 减去导航栏、tabBar高度适配小程序 */ min-height: calc(100vh - var(--window-bottom)); } /style进阶优化使用骨架屏 / Skeleton 占位替代空白区域提升视觉体验。方案 2增加请求锁拦截并发重复请求增加loading布尔锁请求执行期间禁止再次调用接口避免短时间大量请求堆积。script setup import { ref, onShow } from vue const list ref([]) const loading ref(false) const getListData async () { // 请求进行中直接拦截 if (loading.value) return loading.value true try { const res await api.getList() list.value res.data } catch (err) { console.error(请求失败, err) } finally { loading.value false } } onShow(() { getListData() }) /script方案 3页面离开时终止所有等待中的请求【核心根治方案】uni.request 原生返回requestTask支持.abort()主动终止请求。 页面切换、隐藏、卸载时批量终止所有 pending 请求杜绝旧请求回调污染页面。Vue3 setup 完整示例script setup import { ref, onShow, onUnload, onHide } from vue // 保存当前页面所有请求任务 const taskList ref([]) const list ref([]) // 封装请求收集task function fetchData() { const task uni.request({ url: /api/list, method: GET, success: (res) { list.value res.data }, fail: (err) { // 主动abort产生的错误不需要弹窗提示 if (err.errMsg ! request:fail abort) { uni.showToast({ title: 网络异常, icon: none }) } } }) taskList.value.push(task) } onShow(() { fetchData() }) // 页面销毁普通路由跳转navigateTo/redirectTo onUnload(() { taskList.value.forEach(task task.abort()) taskList.value [] }) // Tab页面重点switchTab不会触发onUnload监听onHide onHide(() { taskList.value.forEach(task task.abort()) taskList.value [] }) /script重要提醒使用 luch-request、uView 等请求库可利用cancelToken实现同样效果。方案 4规范生命周期区分初始化刷新与实时刷新90% 开发者踩坑点不分场景全部写在onShow。 ✅标准规范一次性初始化数据页面首次加载→onLoad每次进入页面必须刷新数据→onShow搭配请求锁 请求终止❌禁止列表分页、详情接口全部无脑放入 onShow极易造成请求风暴。方案 5增加请求序列号过滤过期请求进阶兜底即使忘记终止请求也保证只有最新的请求能更新页面数据。script setup import { ref, onShow } from vue const list ref([]) const reqSerial ref(0) async function getList() { const currentSerial reqSerial.value const res await api.getList() // 只有当前最新序列号才允许赋值渲染 if (currentSerial reqSerial.value) { list.value res.data } } onShow(() getList()) /script原理每次发起请求自增序列号旧请求返回时序列号不匹配直接丢弃数据不会覆盖页面。三、TabBar 页面特殊注意事项高频塌陷重灾区uni.switchTab切换底部 Tab 页面页面实例不会销毁onUnload 永远不会执行只会触发 onShow /onHide反复切换 Tab页面常驻内存未终止请求持续堆积固定解决方案 在onHide钩子执行请求 abort页面隐藏立刻切断所有网络请求。四、完整标准页面模板直接复制使用template view classpage-wrap view v-ifloading加载中.../view view v-else-iflist.length 0暂无数据/view view v-else view v-foritem in list :keyitem.id{{item.title}}/view /view /view /template script setup import { ref, onShow, onUnload, onHide } from vue import api from /api/index const list ref([]) const loading ref(false) const taskList ref([]) const loadData async () { if (loading.value) return loading.value true const task uni.request({ url: /api/article/list, success: (res) { list.value res.data }, fail: (err) { if (err.errMsg ! request:fail abort) { uni.showToast({ title: 加载失败, icon: none }) } }, complete: () { loading.value false } }) taskList.value.push(task) } onShow(() { loadData() }) // Tab页面切换触发 onHide(() { taskList.value.forEach(task task.abort()) taskList.value [] }) // 普通页面返回销毁触发 onUnload(() { taskList.value.forEach(task task.abort()) taskList.value [] }) /script style scoped .page-wrap { min-height: calc(100vh - var(--window-bottom)); } /style五、避坑清单开发重点自查❌不要依赖单纯 loading 解决塌陷无法处理请求竞态❌Tab 页面不要只写 onUnload 终止请求必须补充 onHide❌不要在 onShow 并发发起多个互不相关接口❌不要忘记主动 abort 请求长期运行会引发内存泄漏✅多层防护请求锁 终止 pending 请求 CSS 最小高度 请求序列号✅快速复现测试方法快速来回切换 Tab连续多次进出页面观察是否塌陷、闪烁。六、全文总结页面切换引发布局塌陷表面是样式问题本质是异步请求时序失控、请求竞态。 优化优先级强制终止页面隐藏 / 卸载时未完成请求核心使用请求锁避免并发重复调用规范生命周期合理划分 onLoad/onShow 职责CSS 最小高度 / 骨架屏做视觉兜底可选请求序列号兜底过滤过期接口回调按照这套规范改造后可以彻底解决 uni-app 小程序页面切换塌陷、白屏、列表抖动问题。