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

简介: 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分布式缓存等。

如果你有不明白的地方我还会免费为你进行解答,希望能帮助到大家!

目录
相关文章
|
7月前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
1652 3
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
65 1
|
4月前
|
JavaScript 安全
|
5月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
158 4
|
5月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
110 2
|
5月前
uniapp 底部导航栏 tabBar
uniapp 底部导航栏 tabBar
66 0
|
5月前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
683 0
|
7月前
|
JavaScript 前端开发 小程序
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
402 3
|
7月前
|
移动开发 小程序 Android开发
基于jeecgboot的flowable为uniapp适配的流程页面调整
基于jeecgboot的flowable为uniapp适配的流程页面调整
168 0
|
7月前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
1168 0