uniappはタブバーページにジャンプします

uniapp では、tabBar ページを使用して、WeChat、Alipay、その他のアプリと同様の下部メニュー バー機能を実装できます。同時に、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() メソッドを呼び出して現在選択されているタブバーページ。

最後に、uni.navigateTo() メソッドを使用して、上の例の subPage1 ページなど、tabBar ページのサブページにジャンプできます。

サブページ インスタンスの取得

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はタブバーページにジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。