Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse des Vue-Scrollverhaltens

小云云
Freigeben: 2018-02-03 15:00:12
Original
1505 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!