Uniapp passe à la page de la barre d'onglets

Dans uniapp, nous pouvons utiliser la page tabBar pour implémenter la fonction de la barre de menu inférieure similaire à WeChat, Alipay et d'autres applications. Dans le même temps, nous pouvons également implémenter la fonction de saut de sous-page dans la page tabBar.

Dans certains scénarios, nous devrons peut-être accéder à une sous-page spécifique dans la page tabBar sur d'autres composants ou pages. Cet article explique comment y parvenir.

Obtenir l'instance de la page tabBar

Tout d'abord, nous devons obtenir l'instance de la page tabBar dans le composant ou la page qui doit être sautée. Nous pouvons utiliser la méthode uni.getRealPath() pour obtenir le chemin réel de la page actuelle, puis utiliser uni.switchTab() pour sauter. 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 页面实例，并得到了当前选中的子页面实例。我们可以在获取子页面实例的基础上实现页面跳转操作。

结语

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!