解决uni-app中第二次访问tabbar页面时不会加载数据的问题

问题

uni-app中,第二次访问tabbar页面时,在onLoad()里不会重新加载数据

原因及解决方法

原因: tabbar页面是一个webview,而在切换页面时候,webview没有关闭,只是被其他页面覆盖了而已,需要显示时候就把它显示出现,所以页面是不会重新加载数据的。
解决方法: 将相关方法写在onShow()里面

### UniApp 首次切换 TabBar 页面显示空白解决方案 在开发过程中遇到首次切换 TabBar 出现白屏的情况,通常是因为页面初始化某些资源未及加载完成或是渲染机制存在问题。针对此问题有几种常见处理方法: #### 方法一:优化页面加载顺序与依赖管理 确保各个 Tab 对应的页面组件按需懒加载而非一次性全部预加载可以有效减少初次访问其他标签页可能出现的延迟现象。通过调整 `pages.json` 中关于多页面应用配置部分来实现这一点。 ```json { "lazyCodeLoading": "requiredComponents", } ``` 这使得只有当用户实际点击进入某个特定选项卡才会去请求并解析该页面所需的相关代码片段[^1]。 #### 方法二:使用 Vue 生命周期钩子函数控制展示逻辑 利用 created 或 mounted 这样的生命周期阶段来进行数据获取操作而是放在全局范围内执行异步调用。对于一些需要网络请求才能填充内容的部分尤其重要,防止因网速慢等原因造成视觉上的停滞感。 ```javascript export default { data() { return { loaded: false, // other states... }; }, methods: { fetchData() { // Simulate API call or heavy computation here. setTimeout(() => { this.loaded = true; }, 500); } }, onLoad() { this.fetchData(); } }; ``` 上述例子展示了如何定义一个简单的状态变量 `loaded` 来追踪是否已经成功取得必要信息,并配合条件渲染语句决定何向用户呈现最终版本的内容[^2]。 #### 方法三:修正样式布局问题导致的隐藏元素 有看似为空实际上只是因为 CSS 设置当而被遮挡起来的对象。检查是否有绝对定位、浮动属性影响到了正常流内其它节点的位置;另外也要留意父容器的高度宽度设定是否会间接限制住内部子项的实际可见区域[^4]。 例如,在 uni-app 中可以通过设置最小高度 min-height 属性让页面始终占据一定比例屏幕空间从而避免底部留白过多的问题。 ```css page { display: flex; flex-direction: column; height: 100vh; /* Make sure the page takes up full viewport */ } .content-area { flex-grow: 1; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); /* For iPhone X notch support */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值