uniapp開発で中間ページを閉じる方法

uniapp の開発プロセス中、ページを閉じる必要があることがよくあります。しかし、ページを閉じるときに真ん中のページだけを閉じるにはどうすればよいでしょうか?この記事では、この機能をuniapp開発に実装する方法を紹介します。

ステップ 1: ページ スタックを理解する

uniapp では、uni.navigateTo と uni.redirectTo を使用してページにジャンプでき、uni.navigateBack を使用してページに戻ることもできます。前のページ。ページにジャンプしたり戻ったりするプロセスでは、ページ スタックが重要な役割を果たします。

ページ スタックは、現在のページ スタック内のすべてのページを格納する配列です。ページ スタックを通じて、ページ間を移動し、パラメータを渡し、ページを閉じることができます。

デフォルトでは、ページ スタックはホームページ (つまり、app.vue) から始まり、トップ ページはページ スタックの最後に配置されます。

たとえば、uni.navigateTo を介してページ A にジャンプし、次にページ A の uni.navigateTo を介してページ B にジャンプします。このときのページスタックの構造は以下の通りです。

[ home, A, B ]

このうちhomeがホームページ、トップページがBです。ページ B でページ A に戻りたい場合は、uni.navigateBack() 関数を使用して戻すことができます。

ページ A に戻りながらページ B を閉じたい場合、どうすれば実現できますか?これには、ページ スタックを操作する必要があります。

ステップ 2: ページ スタックを操作する

uni.reLaunch を通じてすべてのページを閉じ、開いているページでターゲット ページを再度開くことができます。しかし、中央のページを閉じたいだけなので、これは必要ありません。

uniapp では、uni.getCurrentPages() メソッドを通じて現在のページ スタックを取得できます。このメソッドは、現在のページ スタック内のすべてのページを格納する配列を返します。この配列を通じてページ スタックを操作できます。

まず、getCurrentPages() を通じて現在のページ スタックのステータスを取得できます。

let pages = getCurrentPages()

この時点で、pages 配列はページ スタック内のすべてのページを保存します。ページ スタック内の現在のページと前のページを閉じたい場合は、次のように実行できます。

let pages = getCurrentPages()
let currentPage = pages[pages.length - 1]
let prePage = pages[pages.length - 2]
currentPage.$destroy()
uni.navigateBack({
  delta: 1,
  success: function () {
    prePage.setData({
      foo: 'bar'
    })
  }
})

このコードでは、まず現在のページ スタックのステータスを取得します。次に、現在のページと前のページのインスタンスが、それぞれ currentPage と prePage を通じて取得されます。その後、現在のページのインスタンス オブジェクトを $destroy() メソッドを通じて破棄できます。

最後に、uni.navigateBack() メソッドを使用して前のページに戻り、前のページのデータを変更します。

複数のページを閉じたい場合は、ページをループして 1 つずつ閉じることができます。例えば、現在のページ、前のページ、前のページを閉じたい場合は、次のようにすることができます。

let pages = getCurrentPages()
for (let i = 0; i < 3; i++) {
  let currentPage = pages[pages.length - 1 - i]
  currentPage.$destroy()
}
uni.navigateBack({
  delta: 2,
  success: function () {
    // do something
  }
})

このようにして、中間ページのみを閉じる機能を実現できます。

概要

ユニアプリ開発では、ページ スタックは非常に重要な概念です。ページスタックを理解することで、ページ間のジャンプ、パラメータの受け渡し、ページのクローズなどの機能を実現できます。

中間ページを閉じるには、getCurrentPages() メソッドを使用して現在のページ スタックのステータスを取得し、ループ トラバーサルによってページを 1 つずつ閉じて、最後に uni.navigateBack() メソッドを使用します。前のページに戻ります。

この記事がお役に立てば幸いです。

以上がuniapp開発で中間ページを閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。