当前位置: 首页 > news >正文

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

我们在使用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生命周期中函数的执行与否。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • android display 笔记(六)SurfaceFlinger初始化
  • KEEPALIVED高可用集群知识大全
  • 基于YOLOv8-pose的手部关键点检测(3)- 实现实时手部关键点检测
  • Python中的元类( metaclass )
  • 嵌入式八股-C++面试35题(20240816)
  • 如果从mysql导出百万数据级的excel
  • 记录一次内网dns解析失败的排查
  • 详解Spring MVC
  • 开源BaaS 平台介绍
  • STM32——SSD1306驱动的OLED(I2C)
  • go语言设置定时任务
  • 居住证申报系统小程序的设计
  • H7-TOOL混合脱机烧录以及1拖4不同的通道烧录不同的程序操作说明(2024-08-07)
  • 江协科技STM32学习笔记(第10章 SPI通信)
  • Redis主从哨兵模式
  • Javascript设计模式学习之Observer(观察者)模式
  • Java到底能干嘛?
  • JS笔记四:作用域、变量(函数)提升
  • maven工程打包jar以及java jar命令的classpath使用
  • Redis 中的布隆过滤器
  • 番外篇1:在Windows环境下安装JDK
  • 山寨一个 Promise
  • 实习面试笔记
  • 小李飞刀:SQL题目刷起来!
  • 优秀架构师必须掌握的架构思维
  • Java总结 - String - 这篇请使劲喷我
  • #FPGA(基础知识)
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (一)80c52学习之旅-起始篇
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (转)Unity3DUnity3D在android下调试
  • (转)重识new
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .NET 6 Mysql Canal (CDC 增量同步,捕获变更数据) 案例版
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • .Net Web窗口页属性
  • .NET 分布式技术比较
  • .NET 设计模式—简单工厂(Simple Factory Pattern)
  • .NET处理HTTP请求
  • .net反编译工具
  • .NET企业级应用架构设计系列之应用服务器
  • .net最好用的JSON类Newtonsoft.Json获取多级数据SelectToken
  • @RequestBody与@RequestParam
  • @vue/cli脚手架
  • [202209]mysql8.0 双主集群搭建 亲测可用
  • [BSidesCF 2019]Kookie1
  • [BZOJ3223]文艺平衡树
  • [GN] 设计模式——面向对象设计原则概述
  • [Go WebSocket] 多房间的聊天室(三)自动清理无人房间
  • [iOS]-UIKit
  • [LeetCode]Spiral Matrix
  • [nextjs]推荐几个很好看的模板网站