ホームページ > ウェブフロントエンド > uni-app > uniappはタブバーページにジャンプします

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

WBOY
リリース: 2023-05-22 11:28:07
オリジナル
2176 人が閲覧しました

uniapp では、tabBar ページを使用して、WeChat、Alipay、その他のアプリと同様の下部メニュー バー機能を実装できます。同時に、tabBar ページにサブページ ジャンプ機能を実装することもできます。

一部のシナリオでは、他のコンポーネントまたはページの tabBar ページ内の特定のサブページにジャンプする必要がある場合があります。この記事では、これを実現する方法について説明します。

tabBar ページ インスタンスの取得

まず、ジャンプする必要があるコンポーネントまたはページで tabBar ページ インスタンスを取得する必要があります。 uni.getRealPath() メソッドを使用して現在のページの実際のパスを取得し、uni.switchTab() を使用してジャンプできます。

以下はサンプルコードです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

// 获取当前页面实例

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 ページのサブページ ルーティングを通じてそのインスタンスを取得できます。

以下はサンプル コードです:

1

2

3

4

// 获取当前 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート