uniapp跳转到tabbar页

在uniapp中，我们可以使用 tabbar 页面来实现类似于微信、支付宝等 app 的底部菜单栏功能。同时，我们还可以在 tabbar 页面中实现子页面的跳转功能。

在一些场景中，我们可能需要在其他组件或页面上跳转到 tabBar 页面中特定的子页面。本文将介绍如何完成这一操作。

获取 tabBar 页面实例

首先，我们需要在需要跳转的组件或页面中获取 tabBar 页面的实例。我们可以使用 uni.getRealPath() 方法获取当前页面的真实路径，然后使用 uni.switchTab() 进行跳转。

以下是一个示例代码：

// 获取当前页面实例
let pages = getCurrentPages()
let curPage = pages[pages.length - 1]

// 获取 tabBar 页面路径
let tabBarPath = '/pages/tabBar/tabBar'

// 获取 tabBar 页面实例
let tabBarPage = uni.getRealPath({
  url: tabBarPath
}).route

// 跳转到 tabBar 页面
uni.switchTab({
  url: tabBarPath,
  success() {
    // 获取 tabBar 页面实例
    let tabBarInstance = uni.$app.$children.filter(item => item.$options.name === 'uni-tab-bar')[0]

    // 设置选中的 tabBar 页面
    tabBarInstance.setActive(curPage.route)
    
    // 跳转到指定子页面
    uni.navigateTo({
      url: '/pages/subPage1/subPage1',
    })
  }
})

其中，getCurrentPages() 方法可以获取当前页面栈的实例。我们通过 pages.length - 1 获取当前页面的实例。

然后，我们使用 uni.getRealPath() 方法获取 tabBar 页面的路径，并将其赋值给 tabBarPath 变量。使用 uni.switchTab() 方法跳转到 tabBar 页面。

跳转成功后，我们通过 uni.$app.$children 获取到 tabBar 页面的实例，并调用 setActive() 方法设置当前选中的 tabBar 页面。

非常淘 淘宝客源码

本源码是我用过最好的淘客站源码。对于新站长很用帮助。重要!!注意上传完程序后要先登陆后台修改域名，否则会跳转到后台已设置的域名。 使用方法1:将文件夹里面的文件上传至您的空间根目录(不要在本地测试，本地测试期间功能将被限制，首页模板显示不正常!)2:访问网址http://您的网址/admin 账号:admin 密码:admin3:填写您基本网站信息,以及重要的淘客相关信息 声明：本程序使用权是本人

下载

最后，我们可以使用 uni.navigateTo() 方法跳转到 tabBar 页面的子页面，例如上面的例子中的 subPage1 页面。

获取子页面实例

我们在 tabBar 页面内，通过子页面路由能够获取到其实例。

以下是一个示例代码：

// 获取当前 tabBar 页面实例
let tabBarInstance = uni.$app.$children.filter(item => item.$options.name === 'uni-tab-bar')[0]
// 获取当前选中的子页面实例
let activePageInstance = uni.$app.$children.filter(item => item.$options.name === 'uni-nav-page')[tabBarInstance.activeIndex]

本例中，我们通过过滤获取到了 tabBar 页面实例，并得到了当前选中的子页面实例。我们可以在获取子页面实例的基础上实现页面跳转操作。

结语

通过获取 tabBar 页面实例和子页面实例，我们可以实现在任意组件或页面中跳转到 tabBar 页面特定子页面的操作。请注意，在跳转到 tabBar 页面后，我们需要使用 setActive() 方法设置当前选中的子页面。