uniapp jumps to tabbar page

In uniapp, we can use the tabBar page to implement the bottom menu bar function similar to WeChat, Alipay and other apps. At the same time, we can also implement the subpage jump function in the tabBar page.

In some scenarios, we may need to jump to a specific subpage in the tabBar page on other components or pages. This article explains how to accomplish this.

Get the tabBar page instance

First, we need to get the tabBar page instance in the component or page that needs to be jumped. We can use the uni.getRealPath() method to get the real path of the current page, and then use uni.switchTab() to jump.

The following is a sample code:

// 获取当前页面实例
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',
    })
  }
})

Among them, the getCurrentPages() method can obtain the instance of the current page stack. We get the instance of the current page through pages.length - 1.

Then, we use the uni.getRealPath() method to get the path of the tabBar page and assign it to the tabBarPath variable. Use the uni.switchTab() method to jump to the tabBar page.

After the jump is successful, we obtain the instance of the tabBar page through uni.$app.$children and call the setActive() method to set the currently selected tabBar page.

Finally, we can use the uni.navigateTo() method to jump to a subpage of the tabBar page, such as the subPage1 page in the above example.

Get subpage instance

We can get its instance through subpage routing in the tabBar page.

The following is a sample code:

// 获取当前 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]

In this example, we obtained the tabBar page instance through filtering and obtained the currently selected subpage instance. We can implement page jump operations based on obtaining subpage instances.

Conclusion

By obtaining the tabBar page instance and subpage instance, we can jump to a specific subpage of the tabBar page in any component or page. Please note that after jumping to the tabBar page, we need to use the setActive() method to set the currently selected subpage.

The above is the detailed content of uniapp jumps to tabbar page. For more information, please follow other related articles on the PHP Chinese website!