详解10分钟学会vue滚动行为


Posted in Javascript onSeptember 21, 2017

滚动行为

什么是路由的滚动行为

当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样

注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务

我们用scrollBehavior 方法来做路由滚动

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用

下面我们做一个小案例来了解一下

效果

详解10分钟学会vue滚动行为

<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>

vue滚动小案例

https://besmall.github.io/vue-gundong/

https://github.com/Besmall/vue-gundong

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
JavaScript实现简单生成随机颜色的方法
Sep 21 #Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 #Javascript
shiro授权的实现原理
Sep 21 #Javascript
AngularJS 的$timeout服务示例代码
Sep 21 #Javascript
JS路由跳转的简单实现代码
Sep 21 #Javascript
JS实现的简单标签点击切换功能示例
Sep 21 #Javascript
You might like
php实现最简单的MVC框架实例教程
2014/09/08 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
php数组和链表的区别总结
2019/09/20 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
js 操作css实现代码
2009/06/11 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
python读写文件操作示例程序
2013/12/02 Python
python操作日期和时间的方法
2014/03/11 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python交换两个变量的值方法
2019/01/12 Python
python实现批量转换图片为黑白
2020/06/16 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
年度考核自我鉴定
2013/11/09 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
校园活动策划书范文
2014/01/10 职场文书
高中英语教学反思
2014/02/04 职场文书
校园文明标语
2014/06/13 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
爱国电影观后感
2015/06/19 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
PHP判断是否是json字符串
2021/04/01 PHP