Beispielanalyse des Vue-Scrollverhaltens

Dieser Artikel stellt Ihnen hauptsächlich das Scrollverhalten von Vue vor. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Scrollverhalten

Wie ist das Scrollverhalten beim Routing?

Beim Wechsel zu einer neuen Route möchten Sie die Seite um nach oben zu scrollen oder die ursprüngliche Scrollposition beizubehalten, genau wie beim Neuladen der Seite

Hinweis: Diese Funktion ist nur im HTML5-Verlaufsmodus verfügbar. In diesem Modus müssen wir einen Dienst starten

Wir verwenden die scrollBehavior-Methode, um Routing-Scrolling durchzuführen

Die scrollBehavior-Methode empfängt von und zu Routing-Objekten. Der dritte Parameter „savedPosition“ ist nur bei der Popstate-Navigation verfügbar (ausgelöst durch die Vor-/Zurück-Schaltfläche des Browsers)

Lassen Sie uns einen kleinen Fall durchführen, um den Effekt zu verstehen

<p id="app">
  <h1>滚动行为</h1>
  <ul>
    <li><router-link to="/">首页</router-link></li>
    <li><router-link to="/foo">导航</router-link></li>
    <li><router-link to="/bar">关于</router-link></li>
    <li><router-link to="/bar#an1">红色页面</router-link></li>
    <li><router-link to="/bar#an2">蓝色页面</router-link></li>
  </ul>
  <router-view></router-view>
</p>
<script>
  var Home = {
    template:"<p>home</p>"
  }
  var Foo = {
    template:"<p>foo</p>"
  }
  var Bar = {
    template:
      `
        <p>
          bar
          <p style="height:500px;background: yellow;"></p>
          <p id="an1" style="height:500px;background: red;">红色页面</p>
          <p id="an2" style="height:300px;background: blue;">蓝色页面</p>
        </p>
      `
  }

  var router = new VueRouter({
    mode:"history",
    //控制滚动位置
    scrollBehavior (to, from, savedPosition) {
      //判断如果滚动条的位置存在直接返回到当前位置，否者返回到起点
      if (savedPosition) {
        return savedPosition
      } else {
        if (to.hash) {
          return {selector: to.hash}
        }
      }
    },
    routes:[
      {
        path:"/",component:Home
      },
      {
        path:"/foo",component:Foo
      },
      {
        path:"/bar",component:Bar
      }
    ]
  });
  var vm = new Vue({
    el:"#app",
    router
  });
</script>

Vue Scrolling Small Case

Verwandte Empfehlungen:

Ausführliche Erklärung des Vue-Scroll-Achsen-Plug-Ins Better-Scroll

Das obige ist der detaillierte Inhalt vonBeispielanalyse des Vue-Scrollverhaltens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!