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

Uniapp は、クロスプラットフォーム アプリケーションの構築に使用できる Vue.js に基づく開発フレームワークです。 Uniapp では、ページ上の指定された場所にジャンプすることが一般的な要件です。以下では、Uniappでページ上の指定した場所にジャンプする方法を紹介します。

1. ID を介して指定した場所にジャンプ

HTML では、要素に一意の識別子 (ID) を設定でき、ID を介して対応する要素をすばやく見つけることができます。 Uniappではvue-routerのルーティングパラメータ(Hash)を利用してID経由で指定した場所にジャンプする機能を実装できます。

1. ジャンプする必要があるページで、ジャンプ先の要素の一意の ID を設定します:

<template>
  <div>
    <h1 id="section1">第一部分</h1>
    <p>这是第一部分的内容</p>
    <h1 id="section2">第二部分</h1>
    <p>这是第二部分的内容</p>
  </div>
</template>

2. ジャンプ ページのリンク内ルーティングパラメータ（ハッシュ）を追加します。具体的な方法はリンクの後に「#」を追加します。ジャンプ先の要素のID：

<template>
  <div>
    <a href="#section1">跳转到第一部分</a>
    <a href="#section2">跳转到第二部分</a>
  </div>
</template>

リンクをクリックすると、そのページが表示されます。対応する要素の位置まで自動的にスクロールします。

2. ルーティング パラメーターを使用して指定した場所にジャンプする

ID を使用してジャンプするだけでなく、ルーティング パラメーターを使用して指定した場所にジャンプすることもできます。 Uniapp では、これは vue-router のルーティング パラメーター (ハッシュ) を通じて実現できます。

1. ジャンプする必要があるページで、ジャンプ先の要素の一意の ID を設定します:

<template>
  <div>
    <h1 id="section1">第一部分</h1>
    <p>这是第一部分的内容</p>
    <h1 id="section2">第二部分</h1>
    <p>这是第二部分的内容</p>
  </div>
</template>

2. ジャンプ ページのリンク内ルーティング パラメータ (ハッシュ) を設定します。具体的な方法は、「#」とジャンプ先の要素の ID を使用することです:

<template>
  <div>
    <router-link :to="{path:&#39;/about&#39;,hash:&#39;#section1&#39;}">跳转到第一部分</router-link>
    <router-link :to="{path:&#39;/about&#39;,hash:&#39;#section2&#39;}">跳转到第二部分</router-link>
  </div>
</template>

リンクをクリックすると、ページが自動的にスクロールします対応する要素の位置に移動します。

3. JavaScript による指定位置へのジャンプ

指定位置へのジャンプ機能は、ルーティングパラメータや ID ジャンプ以外にも JavaScript コードで実装することができます。 Uniapp では、通常の JavaScript コードを使用するか、uni-app が公式に提供する API を使用してジャンプを実現できます。

1. JavaScript コードを使用してジャンプします

window.location.href = "#section1";

2. uni-app が公式に提供する API を使用してジャンプします

uni.pageScrollTo({
  selector: "#section1", // 需要跳转到的元素的选择器
  duration: 300, // 滚动时间
  success: function() {
    console.log("跳转成功");
  }
});

これらを通じていずれにしても、ページ上の指定した位置にジャンプする機能を Uniapp に簡単に実装できます。実際の開発では、プロジェクトのニーズや個人の好みに応じて、さまざまな実装方法を選択できます。

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