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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JS中操作JSON总结
Dec 06 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
微信小程序实现留言板
Oct 31 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
利用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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php MYSQL 数据备份类
2009/06/19 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
php中的登陆login实例代码
2016/06/20 PHP
js实现跨域的多种方法
2015/12/25 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
如何删除一个表里面的重复行
2013/07/13 面试题
表彰先进的通报
2014/01/31 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
森林防火宣传标语
2014/06/27 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
世界环境日活动总结
2015/02/11 职场文书
初中毕业生感言
2015/07/31 职场文书
法制教育主题班会
2015/08/13 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Golang 遍历二叉树
2022/04/19 Golang