uniappで指定した場所にジャンプする方法

UniApp は、再利用性の高いモバイル アプリケーションを迅速に構築するために使用できるクロスプラットフォーム開発フレームワークです。 UniApp では、いくつかの簡単な方法を使用して、異なるページ間をジャンプして見つけることができます。今回はUniAppが指定した場所にジャンプする仕組みを紹介します。

UniApp では、vue-router が提供する $router.push メソッドと $router.replace メソッドを使用してジャンプを実装できます。どちらのメソッドも、params (パラメーター) と query (クエリ) の 2 つのオプションを使用できます。このうち、params はルーティング設定で定義される動的パスパラメータ、query はルーティングジャンプで渡されるパラメータです。

たとえば、ルーティングには次のコードがあります:

{
  path: '/demo/:id',
  name: 'Demo',
  component: () => import('@/pages/demo.vue')
}

このルーティングでは、id という名前の動的パス パラメーターを定義します。ページ内のルートにジャンプするとき、$router.push メソッドを通じてパラメーターを渡すことができます。以下に示すように:

this.$router.push({
  name: 'Demo',
  params: {
    id: '123'
  }
})

このようにして、ページジャンプが実現され、パラメータ ID が Demo コンポーネントに渡されます。

現在のページ上の別の場所にジャンプする必要がある場合は、アンカー ポイントを使用してこれを実現できます。アンカーは、HTML 要素を見つけてジャンプするために使用できる HTML 要素の識別子です。たとえば、ID アンカーを持つ要素をページに追加し、一意の識別子を与えることができます。

<div id="anchor"></div>

これで、ジャンプする際にジャンプURLに#anchorのフラグメント識別子を追加して要素にジャンプすることができます。

this.$router.push('/demo/123#anchor')

このようにして、Demoコンポーネントのidアンカーで要素の位置にジャンプすることができます。

UniApp では、アンカー ポイントの使用に加えて、ページの位置決めを実現する他の方法もいくつか提供しています。たとえば、コンポーネントの作成されたライフサイクル内の要素の offsetTop を取得することで、ページの位置決めを実現できます。

created() {
  this.$nextTick(() => {
    let target = document.getElementById('anchor')
    let scrollTop = target.offsetTop
    document.documentElement.scrollTop = scrollTop
    document.body.scrollTop = scrollTop
  })
}

これにより、ページが読み込まれるときに、指定された場所に自動的にジャンプします。

つまり、UniApp では、アンカー ポイントやルーティング パラメーターなどの方法を使用して、指定された場所へのジャンプを実現できます。開発者は、実際の状況に基づいてページの配置を実現するために最適な方法を選択できます。

以上がuniappで指定した場所にジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。