vue implementiert Anker-Scrolling

Vorwort

Es gibt viele Möglichkeiten, das Scrollen mit Seitenankern zu implementieren, aber wie implementiert man es in Vue? In Vue können wir Vue Router verwenden, um Anker-Scrolling zu implementieren. Im Folgenden zeige ich Ihnen anhand einer Codedemonstration, wie Sie das Anker-Scrolling in Vue implementieren.

Schritt 1: Vue Router installieren

Bevor Sie Vue Router verwenden, müssen Sie ihn zuerst installieren. Wir können Vue Router über den folgenden Befehl installieren:

npm install vue-router

oder

yarn add vue-router

Schritt 2: Vue Router konfigurieren

Nach der Installation von Vue Router müssen Sie Vue Router im Code konfigurieren. In Vue müssen wir Vue Router wie folgt in der Datei main.js einführen und verwenden:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Im obigen Code definieren wir drei Routen, nämlich „/“, „/about“, „/contact“. Unter diesen entspricht jede Route einer Komponente: Startseite, Info, Kontakt.

Schritt 3: Definieren Sie den Seitenanker.

In Vue müssen Sie zum Definieren des Seitenankers das ID-Attribut zum HTML-Element hinzufügen, wie unten gezeigt:

<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

Schritt 4: Definieren Sie den Anker-Sprunglink.

In Vue können wir die <router-link> 组件来生成链接。我们需要定义一个 <router-link>-Komponente verwenden, um einen Seitenankersprung wie folgt zu erreichen:

<router-link to="#section1">Section 1</router-link>
<router-link to="#section2">Section 2</router-link>
<router-link to="#section3">Section 3</router-link>

Im obigen Code verwenden wir das to-Attribut, um die Linkadresse zu definieren, und sein Wert ist die Anker-ID.

Schritt 5: Anker-Scrolling implementieren

In Vue können wir Anker-Scrolling über Hook-Funktionen implementieren. Nach Abschluss jedes Routensprungs müssen wir zur Ankerposition scrollen. Die Hook-Funktion kann im Routing von Vue definiert werden. Der spezifische Code lautet wie folgt:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 定义滚动操作,这里的to和from都是路由信息对象
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      // 滚动到指定的锚点
      return { selector: to.hash }
    } else {
      // 没有指定锚点则返回屏幕最上方
      return { x: 0, y: 0 }
    }
  }
})

Im obigen Code definieren wir den Bildlaufvorgang über scrollBehavior. Wenn das Routing-Objekt ein Hash-Attribut enthält, dh wenn das Routing zum angegebenen Ankerpunkt springt, wird der Scroll-Vorgang ausgeführt. Andernfalls wird der Scroll-Vorgang nicht ausgeführt.

Fazit

Zu diesem Zeitpunkt haben wir den Code zur Implementierung des Seitenanker-Scrollens in Vue fertiggestellt. Durch die leistungsstarken Funktionen von Vue Router können wir Anker-Scrollen einfach implementieren, um die Benutzererfahrung zu verbessern. Wenn Sie über andere Implementierungsmethoden verfügen, teilen Sie diese bitte allen mit.

Das obige ist der detaillierte Inhalt vonvue implementiert Anker-Scrolling. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!