Analyse d'un exemple de comportement de défilement de Vue

Cet article vous présente principalement le comportement de défilement de Vue. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Comportement de défilement

Quel est le comportement de défilement du routage

Lorsque vous passez à un nouvel itinéraire, vous voulez que la page pour faire défiler vers le haut, ou conserver la position de défilement d'origine, tout comme recharger la page

Remarque : Cette fonctionnalité n'est disponible qu'en mode historique HTML5. Dans ce mode, nous devons démarrer un service

Nous utilisons la méthode scrollBehavior pour effectuer le défilement de routage

La méthode scrollBehavior reçoit vers et depuis des objets de routage. Le troisième paramètre savingPosition est disponible quand et seulement lors de la navigation popstate (déclenchée par le bouton avant/arrière du navigateur)

Faisons un petit cas pour comprendre l'effet

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

Petit étui à défilement Vue

Recommandations associées :

Explication détaillée du plug-in de l'axe de défilement de la vue, meilleur défilement

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!