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 suit est un exemple de code : 🎜rrreee🎜Parmi eux, la méthode getCurrentPages() peut obtenir l'instance de la pile de pages actuelle. Nous obtenons l'instance de la page actuelle via pages.length - 1. 🎜🎜Ensuite, nous utilisons la méthode uni.getRealPath() pour obtenir le chemin de la page tabBar et l'attribuons à la variable tabBarPath. Utilisez la méthode uni.switchTab() pour accéder à la page tabBar. 🎜🎜Une fois le saut réussi, nous obtenons l'instance de la page tabBar via uni.$app.$children et appelons la méthode setActive() pour définir le paramètre actuellement sélectionné. page Barre d'onglets. 🎜🎜Enfin, nous pouvons utiliser la méthode uni.navigateTo() pour accéder à une sous-page de la page tabBar, comme la page subPage1 dans l'exemple ci-dessus. 🎜🎜Obtenir l'instance de sous-page🎜🎜Nous pouvons obtenir son instance via le routage de sous-page dans la page tabBar. 🎜🎜Ce qui suit est un exemple de code : 🎜rrreee🎜Dans cet exemple, nous avons obtenu l'instance de page tabBar par filtrage et obtenu l'instance de sous-page actuellement sélectionnée. Nous pouvons implémenter des opérations de saut de page basées sur l'obtention d'instances de sous-page. 🎜🎜Conclusion🎜🎜En obtenant l'instance de page tabBar et l'instance de sous-page, nous pouvons accéder à une sous-page spécifique de la page tabBar dans n'importe quel composant ou page. Veuillez noter qu'après avoir accédé à la page tabBar, nous devons utiliser la méthode setActive() pour définir la sous-page actuellement sélectionnée. 🎜

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!