Vue 滚动行为的具体使用方法


Posted in Javascript onSeptember 13, 2017

滚动行为

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在 HTML5 history 模式下可用。

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
 // return 期望滚动到哪个的位置
}
})

返回滚动位置的对象信息

{ x: number, y: number }
{ selector: string }

如果返回一个布尔假的值,或者是一个空对象,那么不会发生滚动。

<div 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>
</div>
<script>
  var Home = {
    template:"<div>home</div>"
  }
  var Foo = {
    template:"<div>foo</div>"
  }
  var Bar = {
    template:
      `
        <div>
          bar
          <div style="height:500px;background: yellow;"></div>
          <p id="an1" style="height:500px;background: red;">红色页面</p>
          <p id="an2" style="height:300px;background: blue;">蓝色页面</p>
        </div>
      `
  }

  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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 #Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 #Javascript
Js利用Canvas实现图片压缩功能
Sep 13 #Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 #Javascript
You might like
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
重命名批处理python脚本
2013/04/05 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python对excel的基本操作方法
2021/02/18 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
大学生个人事迹材料
2014/01/21 职场文书
新三好学生主要事迹
2014/01/23 职场文书
业务部主管岗位职责
2014/01/29 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书