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 tools之tabs 选项卡/页签
Jul 25 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JS中常用的消息框总结
Feb 24 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 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缓存设计实现代码
2011/09/30 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php生成短网址示例
2014/05/05 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
通过cmd进入python的实例操作
2019/06/26 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
保安队长职务说明书
2014/02/23 职场文书
党员干部承诺书
2014/03/25 职场文书
寄语学生的话
2014/04/10 职场文书
大学生毕业求职信
2014/06/12 职场文书
施工安全汇报材料
2014/08/17 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
单位委托书格式范本
2014/09/29 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
二婚主持词
2015/06/30 职场文书
教育读书笔记
2015/07/02 职场文书