Comment accéder à l'emplacement spécifié sur la page dans Uniapp

Uniapp est un framework de développement basé sur Vue.js qui peut être utilisé pour créer des applications multiplateformes. Dans Uniapp, accéder à un emplacement spécifié sur la page est une exigence courante. Ci-dessous, nous vous présenterons comment accéder à l'emplacement spécifié sur la page dans Uniapp.

1. Accédez à l'emplacement spécifié via l'ID

En HTML, vous pouvez définir un identifiant unique (ID) pour un élément et vous pouvez localiser rapidement l'élément correspondant via l'ID. Dans Uniapp, vous pouvez utiliser le paramètre de routage (Hash) de vue-router pour implémenter la fonction de saut vers un emplacement spécifié via ID.

1. Dans la page qui doit sauter, définissez un identifiant unique pour l'élément vers lequel accéder :

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

2. Ajoutez des paramètres de routage (Hash) dans le lien vers la page de saut. après le lien "#"+ID de l'élément auquel vous souhaitez accéder :

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

Lorsque vous cliquez sur le lien, la page défilera automatiquement jusqu'à la position de l'élément correspondant.

2. Accédez à l'emplacement spécifié via les paramètres de routage

En plus d'utiliser l'ID pour sauter, vous pouvez également utiliser les paramètres de routage pour accéder à l'emplacement spécifié. Dans Uniapp, cela peut être réalisé grâce aux paramètres de routage (Hash) de vue-router.

1. Dans la page qui doit sauter, définissez un identifiant unique pour l'élément auquel vous devez accéder :

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

2. Définissez les paramètres de routage (Hash) dans le lien de la page de saut. La méthode spécifique consiste à utiliser ". #" Ajoutez l'ID de l'élément auquel vous souhaitez accéder :

<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>

Lorsque vous cliquez sur le lien, la page défilera automatiquement jusqu'à la position de l'élément correspondant.

3. Accédez à l'emplacement spécifié via JavaScript

En plus d'utiliser les paramètres de routage et les sauts d'ID, la fonction de saut vers l'emplacement spécifié peut également être implémentée via le code JavaScript. Dans Uniapp, vous pouvez utiliser du code JavaScript standard ou utiliser l'API officiellement fournie par uni-app pour réaliser le saut.

1. Utilisez le code JavaScript pour sauter

window.location.href = "#section1";

2. Utilisez le saut API officiellement fourni par uni-app

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

Grâce à ces trois méthodes, nous pouvons facilement implémenter la fonction de saut vers l'emplacement spécifié sur la page dans Uniapp. Dans le développement réel, différentes méthodes de mise en œuvre peuvent être sélectionnées en fonction des besoins du projet et des préférences personnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!