uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)

大家好!最近几周我发现,每周一都会头疼Bug让我遇到,下面来简单介绍一下,今天遇到了哪个头疼问题!

问题描述

首先先说下实现什么功能:
我想从一个普通页面跳转到tabBar中页面(这里指的页面是:小程序中底部导航那几个图标点击后所对应的页面),一开始我使用的是uni.navigateTo,但是跳转没有效果,在网上搜索了一下,要使用uni.switchTab来解决普通页面跳转到tabBar页面,试了一下没有问题。
我还有一个问题是:举例A页面跳转到B页面,执行某些渲染B页面的方法,我一开始是在B页面中的onLoad里面进行接收A页面的参数,但是发现了一个问题!
如果是用onLoad,接收参数,并且每次跳转都要刷新页面,是不可以的,要是使用onShow可以解决这个问题,我专门整理了一下onShow和onLoad的区别

onShow和onLoad的区别

onLoad: 是在页面加载时触发,用于页面的初始化操作,只执行一次。
onShow: 是在页面展示时触发,用于处理页面显示相关的逻辑,可能会多次执行,包括页面首次展示和从后台切换到前台时。
我现在的这个场景下比较适合用onShow
下面以代码的形式进行展现,普通页面跳转到tabBar页面

解决方案

A页面代码
我这边是做了一个值的判断,并且没有携带参数如果需要携带参数的直接在index后面加个?跟参数名字和参数值,示例/pages/test/index?id=value

if(value==2){
 uni.setStorageSync('param1', value-2);
  uni.switchTab({
    url: '/pages/test/index',
  });
}

B页面代码
我这个地方使用的缓存,但是感觉这块没有必要去用缓存,我后期把它去掉,进行参数传递就可以,如果你的需求和我的一样每次跳转都要刷新页面,就放到onShow的里面

onShow() {
   this.indexTab = uni.getStorageSync('param1');
   console.log('param1:', this.indexTab);
   uni.removeStorageSync('param1'); // 清除本地存储的参数,如果需要
},

结束语

本次就是普通页面跳转到tabBar页面详解以及onShow和onLoad的区别,最近一直在项目上挺忙的,后期可以分享一下关于ant design vue方面的技术,包括redis分布式缓存等。
如果你有不明白的地方我还会免费为你进行解答,希望能帮助到大家!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp中,切换tabbar时会遇到页面一起刷新的问题。解决这个问题的方法有几种。一种方法是在pages.json文件中设置原生tabbar,并在页面运行时将原生tabbar隐藏,以解决闪烁问题。这种方法可以参考自定义tabbar闪烁问题的解决方法。\[1\] 另一种方法是自行封装tabbar组件,确保tabbar选项在页面切换时正确激活。封装tabbar组件时,需要注意设置激活和非激活状态,并确保在页面切换时正确激活选项。\[2\] 当封装完成后,在页面中引入组件进行使用。然而,由于tabbar处于不同的pages下,数据不能共享,导致无法正确激活选项。为了解决这个问题,可以考虑以下几种方案: 1. 使用状态管理插件如vuex或pinia来共享激活页索引,在点击切换时修改状态即可。 2. 在页面跳转时传递要跳转页的索引,并在跳转页中将数据传入自定义的tabbar组件。 3. 使用uni.switchTab方法进行跳转时携带参数,然后在其他页面使用onLoad接收参数来实现页面刷新。 另外,还有一种方法是将所有内容放在一个页面中,只有一个tabbar,并通过局部跳转来切换其他内容。\[3\] 综上所述,Uniapp中切换tabbar刷新页面的方法有多种,可以根据具体需求选择适合的方法来解决问题。 #### 引用[.reference_title] - *1* *2* *3* [uniapp自定义tabbar](https://blog.csdn.net/weixin_45855502/article/details/129309134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值