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 HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
python实现倒计时的示例
2014/02/14 Python
python连接字符串的方法小结
2015/07/13 Python
总结Python编程中函数的使用要点
2016/03/20 Python
Python图算法实例分析
2016/08/13 Python
python 异或加密字符串的实例
2018/10/14 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python处理session的方法整理
2019/08/29 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
英文自荐信
2013/12/15 职场文书
期末自我鉴定
2014/01/23 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
Python实现打乒乓小游戏
2021/09/25 Python