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