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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
javascript this用法小结
Dec 19 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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和ACCESS写聊天室(五)
2006/10/09 PHP
解析php中memcache的应用
2013/06/18 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP缓冲区用法总结
2016/02/14 PHP
JavaScript修改css样式style
2008/04/15 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
应届生程序员求职信
2013/11/05 职场文书
文案策划求职信
2014/03/18 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
东京审判观后感
2015/06/01 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python