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

news2024/11/18 18:45:40

我们在使用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出去,不调用onLoad
       page.onLoad();
    }
  })

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

3、将标签页改为普通页

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2066046.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java二十三种设计模式-解释器模式(23/23)

本文深入探讨了解释器模式,这是一种行为设计模式,用于构建和解释执行自定义语言,提供了实现方法、优点、缺点、与其他模式的比较、最佳实践和替代方案的全面分析,帮助开发者在实际应用中做出明智的设计选择。 解释器模式&#xff…

uniapp(微信小程序如何使用单选框、复选框)

一、先看效果 二、数据结构 说明:selected用来记录每次用户选择的值,当是单选的时候属性中的selected属性需要设置成字符串,当是复选框的时候,此时选择的是数组,selected属性应设置为数组。type用来区分当前是单选还是…

《爬虫+大模型》到底有没有搞头?

最近在学习大模型&#xff0c;之前我是干过一段时间爬虫&#xff0c;在学习大模型的过程中&#xff0c;突发奇想能不能把大模型的能力结合爬虫&#xff0c;搞个AI爬虫玩一玩。 说干就干&#xff0c;先测试一下大模型的数据提取能力 <table width"100%" class&qu…

增强管道数据流转(EPDR)技术的设计局限和替代

在前文中&#xff0c;我们介绍了EPDR技术的起源&#xff0c;以及使用该技术驱动的业余软件无线电平台专栏。已有玩家通过踩坑证明&#xff0c;进程管道交换数据时间延迟大&#xff0c;构造时间敏感系统难。除非采用传统的紧耦合设计及更大的颗粒度&#xff0c;否则很难在期望的…

云计算实训34——docker环境配置、镜像基本操作、容器基本操作、设置远程连接管理

一、配置docker环境 写入模块 [rootdocker ~]# cat << EOF | tee /etc/modules-load.d/k8s.conf > overlay > br_netfilter > EOF 加载模块 #内核模块 [rootdocker ~]# modprobe overlay #桥接模块 [rootdocker ~]# modprobe br_netfilter #查看所添加的模…

物联网安装调试员:振兴杯全国青年职业技能大赛背后的人才培养

一、物联网安装调试员职业概述 1.1 职业定义 物联网安装调试员是信息时代下新兴的职业之一&#xff0c;他们利用先进的检测仪器和专用工具&#xff0c;负责物联网产品的安装、配置和调试工作。这项工作的核心是确保物联网设备能够高效、稳定地运行&#xff0c;实现数据的互联…

【精选】基于数据可视化的智慧社区内网平台

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

简单的jar包重打包Failed to get nested archive for entry 报错处理

简单的jar包重打包Failed to get nested archive for entry 报错处理 1. 需求 公司有一个后端项目&#xff0c;项目已经打好了jar包&#xff0c;现在我们发现jar包依赖的子包有问题&#xff0c;其中的一个mybatis xml文件查询数据不正确&#xff0c;我们需要替换项目&#xf…

使用Blender进行3D建模—基础操作笔记

Blender 3D 建模&#x1f680; 在博0阶段&#xff0c;目前已经完成立创EDA的PCB绘制的基础学习&#xff0c;树莓派的系统安装远程控制能学习&#xff0c;加上我本硕阶段学习的单片机和深度学习人工智能算法的知识&#xff0c;这里打算补上一块比较重要的能力拼图&#xff0c;就…

集团数字化转型方案(八)

集团数字化转型方案是一项全面而系统的工程&#xff0c;旨在通过构建基于云计算、大数据、人工智能等现代信息技术的企业级数字化平台&#xff0c;对传统的组织结构、业务流程、管理模式实现根本性革新。方案将围绕数据驱动的决策机制、智能化业务流程、数字化的客户体验、平台…

编程实现基于信息熵/基尼指数划分选择的决策树算法

编程实现基于信息熵/基尼指数划分选择的决策树算法 手动建立一个csv文件 #csv的内容为 Idx,color,root,knocks,texture,navel,touch,density,sugar_ratio,label 1,dark_green,curl_up,little_heavily,distinct,sinking,hard_smooth,0.697,0.46,1 2,black,curl_up,heavily,disti…

Linux驱动学习之点灯(五,设备树没用平台设备总线)

创建一个设备树节点 /{led:led{compatible"led";led_pin<&gpio0 22 GPIO_ACTIVE_HIGH &gpio0 21 GPIO_ACTIVE_HIGH>;status"okay";} } OF函数介绍 查找属性 of_gpio_named_count of_gpio_named_count 函数用于获取设备树某个属性里面定…

Calendar 控件 自定义重汇效果

自定义样式代码&#xff1a; <UserControl.Resources><c:MarginWithScheduleConverter x:Key"MarginWithScheduleConverter"/><Style TargetType"GroupBox" BasedOn"{StaticResource GroupBoxStyle}"/><Style x:Key"C…

Linux系统管理体系-服务管理

1、管理命令 systemctl 管理服务 开机自启动管理正在运行的服务 1&#xff09;检查sshd远程连接服务状态 systemctl status sshd systemctl status 单个或者多个服务名2&#xff09;如何设置服务开启 #运行服务 systemctl start sshd #开机自启动 systemctl enable sshd #…

【opencv】SIFT(尺度不变特征变换)算法?

关键词&#xff1a;SIFT Algorithm 文章目录 一、介绍二、什么是 SIFT 算法&#xff1f;三、人类与机器识别3.1 SIFT 在计算机视觉中的应用3.2 SIFT 关键点的优势3.3 示例演示 四、关键点定位关键点选择 五、入学指导任务5.1 计算大小和方向5.2 创建震级和方向的直方图5.3 关键…

【LLM大模型论文日更】| QAEA-DR:一个用于密集检索的统一文本增强框架

论文&#xff1a;https://arxiv.org/pdf/2407.20207代码&#xff1a;未开源机构&#xff1a;鹏城实验室领域&#xff1a;稠密检索发表&#xff1a;arXiv 研究背景 研究问题&#xff1a;这篇文章要解决的问题是密集检索&#xff08;Dense Retrieval&#xff09;中&#xff0c;将…

Windows:Node.js下载与安装教程

1、进入nodejs官网&#xff1a;https://nodejs.org/en 2、配置系统参数 3、运行cmd&#xff0c;输入 node -v 出现安装版本即安装成功

Keil C51 插件 检测所有if语句

此插件解决的问题 Keil 插件 -- Python 代码 import chardet, sys, glob, re from pathlib import Pathfrom collections import deque# 变量名字典 key--数据名 value--数据s类型 variable_dic {}# 初始化一个空的二维数组 matrix [] # 列表的头数据 header_list [] # 列表…

Tina5 Linux开发

准备开发环境 首先准备一台 Ubuntu 20.04 / Ubuntu 18.04 / Ubuntu 16.04 / Ubuntu 14.04 的虚拟机或实体机&#xff0c;其他系统没有测试过出 BUG 不管。 更新系统&#xff0c;安装基础软件包 sudo apt-get update sudo apt-get upgrade -y sudo apt-get install build-ess…

保护网站安全,了解常见的几种网络攻击

随着互联网技术的迅猛发展&#xff0c;网站作为信息展示和交互的重要平台&#xff0c;面临着日益复杂的网络攻击威胁。从简单的口令入侵到复杂的分布式拒绝服务&#xff08;DDoS&#xff09;攻击&#xff0c;网络攻击手段层出不穷&#xff0c;给网站所有者带来了巨大的挑战。今…