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頁面。

最後，我們可以使用 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() 方法來設定目前選取的子頁面。

以上是uniapp跳到tabbar頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！