How to jump to the specified location on the page in uniapp

Uniapp is a development framework based on Vue.js that can be used to build cross-platform applications. In Uniapp, jumping to a specified location on the page is a common requirement. Below, we will introduce to you how to jump to the specified location on the page in Uniapp.

1. Jump to the specified location through ID

In HTML, you can set a unique identifier (ID) for an element, and you can quickly locate the corresponding element through the ID. In Uniapp, you can use the routing parameter (Hash) of vue-router to implement the function of jumping to a specified location through ID.

1. In the page that needs to jump, set a unique ID for the element that needs to jump to:

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

2. In the link of the jump page Add routing parameters (Hash). The specific method is to add "#" after the link. The ID of the element that needs to be jumped to:

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

When the link is clicked, the page will automatically scroll to the corresponding element position. .

2. Jump to the specified location through routing parameters

In addition to using ID to jump, you can also use routing parameters to jump to the specified location. In Uniapp, this can be achieved through the routing parameters (Hash) of vue-router.

1. In the page that needs to jump, set a unique ID for the element that needs to jump to:

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

2. In the link of the jump page Set the routing parameters (Hash). The specific method is to use "#" plus the ID of the element you want to jump to:

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

When you click the link, the page will automatically scroll to the corresponding element position.

3. Jump to the specified location through JavaScript

In addition to using routing parameters and ID jumps, the function of jumping to the specified location can also be implemented through JavaScript code. In Uniapp, you can use regular JavaScript code or use the API officially provided by uni-app to achieve the jump.

1. Use JavaScript code to jump

window.location.href = "#section1";

2. Use the api officially provided by uni-app to jump

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

Through these three Either way, we can easily implement the function of jumping to the specified location on the page in Uniapp. In actual development, different implementation methods can be selected according to project needs and personal preferences.

The above is the detailed content of How to jump to the specified location on the page in uniapp. For more information, please follow other related articles on the PHP Chinese website!