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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
基于jquery的气泡提示效果
May 31 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
JavaScript如何操作css
Oct 24 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 删除记录实现代码
2009/03/12 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
在macOS上搭建python环境的实现方法
2019/08/13 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python属于哪种语言
2020/08/16 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
2014春晚主持词
2014/03/25 职场文书
大学开学计划书
2014/04/30 职场文书
学习保证书100字
2015/02/26 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书