uniapp跳转到tabbar页-uni-app-PHP中文网

uniapp跳转到tabbar页

WBOY

发布： 2023-05-22 11:28:07

原创

2351人浏览过

在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 页面。

最后，我们可以使用 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 页面实例，并得到了当前选中的子页面实例。我们可以在获取子页面实例的基础上实现页面跳转操作。