解决使用uniapp时,uni.switchTab跳转标签页面不刷新的问题

devtools/2024/9/23 0:03:37/

我们在使用uni.switchTab跳转到标签页面时,并不会触发这个标签页面的onLoad方法。这是因为uni-app中,uni.switchTab用于跳转到指定的标签(tab)页面。由于标签页面是单实例的,即无论何时切换到该标签页面,都使用的是同一个页面实例,所以使用 uni.switchTab 跳转时,并不会重新创建页面实例,因此不会触发 onLoad 生命周期方法。但是我们又会有这样的场景,在进入到标签页时,要调用一些方法来进行数据的展示,那么这时候,我们有三种常见的解决方案。

1、使用onShow生命周期方法

在这里,先稍微的解释一下onShow和onLoan生命周期;

  • onLoad:当页面被加载时触发,每次页面跳转都会触发。
  • onShow:当页面显示时触发,比如从其他页面切换回当前页面时。

当你使用 uni.switchTab 跳转到一个已经打开的标签页面时,页面并不会重新加载,所以 onLoad 不会被触发。但是,onShow 方法会被触发,因为它表示页面显示在用户面前。

所以,我们完全可以将要调用的方法放在onshow生命周期里面。但是,现在问题是已经解决了,但是将方法放在onShow生命周期中会有一个问题,就是会频繁的调用onShow生命周期中的方法。如果,你对此不介意,那么就没有问题了,如果你想要动态的执行onShow里的方法,可以在使用 uni.switchTab 跳转的时候传递一个参数,来控制onShow中方法的执行。

uni.switchTab({url: "/pages/user/chuanyue",success: function (e) {   console.log("目标页面加载成功,携带参数并触发事件")uni.$emit('testParam', "你好")}})

在跳转的页面进行接收:

onShow(){uni.$on('testParam', (data) => {console.log('testParam',dataa)});},

接下来运行项目进行测试:

可以看到参数能够正常的传递并接收,基于这个参数,我们可以在onShow方法中进行判断,从而正确的进行方法的调用。

(有一点要注意的是,

 success: function () 方法是跳转成功之后才执行的逻辑,那么问题来了。假如现在我要跳转到页面B,那么是页面B的生命周期函数先执行,还是上个页面中的success: function ()方法先执行呢?

  • 页面B的生命周期函数:在页面B开始加载时,其生命周期函数会首先执行。这些函数是页面B的Vue组件的一部分,负责设置页面B的初始状态、执行数据加载等操作。

  • 上个页面中的success: function ()方法:在uni.switchTab调用成功,并且页面B的生命周期函数开始执行之后,上个页面中的success回调函数才会被调用。这是因为success回调是用来通知你跳转请求已经成功发出,并且页面B的加载过程已经开始,而不是用来等待页面B完全渲染完成。

因此,可以明确地说,在页面B的生命周期函数开始执行之后,上个页面中的 success: function ()方法才会被调用。但是,这两个过程之间的时间差通常非常短,因为页面B的加载几乎是立即开始的。

2、使用getCurrentPages来获取页面实例,从而强行调用onLoad方法来执行

  uni.switchTab({ url: '/pages/index/index',success: function (e) {var page = getCurrentPages().pop();// 返回页面数组的最后一个页面数据if (page == undefined || page == null) return;  //如果最后一个页面为undefined或null,即当前就在首页 return出去,不调用onLoadpage.onLoad();}})

这样就能强行调用到要跳转页面的onLoad方法了。

3、将标签页改为普通页

这个方法其实有些扯淡了,但是有些时候从业务的方面想一想。我们真的需要那么多的标签页吗?

只要将标签页改为普通的页面,就可以直接在跳转的时候,触发相应的方法了。

当然,这三种方法只是最常见,最简单的解决方案,我们也可以使用一些其他的方案,比如

使用全局事件总线(Event Bus)、自定义路由的实现等等。当然,简单实现的话还是以上的三种方法,我个人还是比较推荐第一种的,直接使用onShow进行一些函数的执行,我们只要在跳转页面的时候就行一下参数的传递,就可以根据这些参数来动态的控制onShow生命周期中函数的执行与否。


http://www.ppmy.cn/devtools/96297.html

相关文章

Elasticsearch、Easy-es 快速入门 SearchAfterPage分页 若依前后端分离 Ruoyi-Vue SpringBoot

一、环境安装 Elasticsearch ik分词器 1.1 下载解压Elasticsearch-7.x版本,越高越好,低版本有Log4j漏洞,Easy-es目前支持7.x 1.2 IK中文分词器 将对应Elasticsearch版本IK放进文件夹,Elasticsearch-7.6.1,ik对应版…

输出Docker容器的启动命令行脚本

当Docker容器启动后,如果忘记启动参数,比如目录挂载、端口映射等,可以通过Portainer等容器管理工具查看。但是,有时希望能获取容器启动的命令行,因为需要再启动一个类似容器,怎么办呢? 有一款工…

详细介绍pytorch重要的API

文章目录 1. Tensor(张量)创建 Tensor操作 Tensor 2. Autograd(自动求导)3. nn.Module(神经网络模块)4. Optimizer(优化器)5. Loss Function(损失函数)6. Dat…

李沐老师动手深度学习pytorch版本的读取fashion_mnist数据并用AlexNet模型训练,其中修改为利用本地的数据集训练

李沐老师的d2l.load_data_fashion_mnist里面没有root参数,所以只会下载,不能利用本地的fashion_mnist数据。所以我使用torchvision 的datasets里面FashionMNIST方法,又由于李沐老师此处是利用AlexNet模型来训练fashion_mnist数据,…

期货的种类之什么是股指期货的类型?

期货可以分为商品期权和股指期货,商品期货的标的物主要是现货,而股指期货的标的物主要是指数。简单来说,就是一种基于股票指数未来的价格变动来进行交易的金融衍生品。它的全称是“股票价格指数期货”,英文简称SPIF。 股指期货怎…

大模型基于指令的知识编辑:InstructEdit技术

人工智能咨询培训老师叶梓 转载标明出处 在知识更新和编辑方面,大模型在特定任务上表现出色,但在面对不同任务时往往力不从心,需要为每个任务单独设计编辑器,这在一定程度上限制了其应用范围。为了解决这一问题,浙江大…

python-素数回文(赛氪OJ)

[题目描述] 现在给出一个素数,这个素数满足两点: 1、 只由 1∼9 组成,并且每个数只出现一次,如 13,23,1289 。 2、 位数从高到低为递减或递增,如 2459,87631 。 请你判断一下,这个素数的回文数是否为素数&a…

C语言日常练习 Day17

目录 一、找出一个二维数组的鞍点 二、有一篇文章,共有3行文字,每行有80个字符。要求分别统计出其中的英文大写字母、小写字母、数字、空格以及其他字符的个数 三、有一行电文,已按下面规律编译成密码:A->Z,a->z,B->Y,…