关于前端:VueRouter过渡动效滚动行为七

58次阅读

共计 1213 个字符，预计需要花费 4 分钟才能阅读完成。

看看代码：
app.vue：

<transition>
    <router-view />
</transition>

<style>
    /* enter */
  .v-enter {transform: translateX(1000px);
  }
  .v-enter-active {transition: all .5s;}
  .v-enter-to {transform: translateX(0px);
  }
</style>

成果如下：

先来模仿一个场景：

仔细的敌人可能发现，右侧的滚动条在跳转后依然在原来的地位。而咱们通常见到的切换路由后，滚动条默认停留在页面顶部。那么为什么会停留在原来的地位呢？因为咱们应用 vue 创立的是一个单页面的利用，所以只有一个 html 文件，不论你的路由怎么变动，展现的页面始终是那一个 html。

那么想要切换路由后滚动条停留在页面顶部应该怎么做呢？代码如下：
router.js：

const router = new VueRouter({
  mode: 'history',
  routes: [...],
  
  //x，横滚；y，纵滚
  scrollBehavior () {
    return {
      x: 0,
      y: 0,
    }
  },
})

看成果：

这样看起来才像多个页面的利用。

看看 scrollBehavior 的三个参数都是什么：

// 到哪儿去，从哪儿来和保留的地位
scrollBehavior (to, from, savedPosition) {if (savedPosition) {console.log(savedPosition)
    } else {
      return {
        x: 0,
        y: 0,
      }
    }
},

看输入：

to 和 from 看过前几篇文章应该不生疏，而 savedPosition，其实就是保留了上一次滚动条的地位。

过渡动效可能会用到，但也不是什么难的知识点，把握了 transition 标签就可能下笔如有神。而滚动行为，说白了就是管制滚动条的地位，为了在切换路由时的成果更像多个 html 文件来回切换，通常将滚动条的地位设置到顶端。而有些状况下也可能须要对某些页面做一些非凡解决，例如：咱们想要在进入页面时将某一页面默认固定在某个地位，这时能够应用之前介绍的路由元信息，在 meta 中配置横向滚动条和纵向滚动条的地位，而后再利用 scrollBehavior 的 to 和 from 获取 meta 中的信息，而后设置滚动行为。

这一章完结后，路由的根本内容就全副梳理完了。前面的大块内容临时还没想好，可能近一段时间内会写一些零星的内容。这段时间在工作中和自学的过程中，的确失去了不少的播种，并且在分享的过程中也让本人的技术水平更上一层楼。尽管很少有人点赞我的作品，但我依然在保持分享，这让我很高兴，也让我在工作中更踊跃，也慢慢的找到了前端开发的一些小窍门。尽管我当初做的工作还微不足道，但我也学会了如何在这样的工作中晋升本人。路漫漫其修远兮，持续致力，持续在开发中找乐趣。

Keep foolish, keep hungry.

正文完