详解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 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
layDate日期控件使用方法详解
Nov 15 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
javascript实现简易的计算器
Jan 17 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python文件和目录操作详解
2015/02/08 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
flask中的wtforms使用方法
2018/07/21 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python实现ATM系统
2020/02/17 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
成龙洗发水广告词
2014/03/14 职场文书
大学学风建设方案
2014/05/04 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
房屋授权委托书范本
2014/10/07 职场文书
三八妇女节寄语
2015/02/27 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python