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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
Vue基础配置讲解
Nov 29 Javascript
vue实现登录功能
Dec 31 Vue.js
利用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中MD5函数使用实例代码
2008/06/07 PHP
php db类库进行数据库操作
2009/03/19 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
js 动态选中下拉框
2009/11/26 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
JS计算距当前时间的时间差实例
2017/12/29 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
vue框架搭建之axios使用教程
2018/07/11 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
领导干部保密承诺书
2014/08/30 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
投资入股合作协议书
2014/10/28 职场文书
2014年林业工作总结
2014/12/05 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
利用python做表格数据处理
2021/04/13 Python
详解Flask开发技巧之异常处理
2021/06/15 Python