详解使用vue-router进行页面切换时滚动条位置与滚动监听事件


Posted in Javascript onMarch 08, 2017

按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。

说说我的破解方法:

1、在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题;

2、在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch为true时进行监听函数,然后在组件destroyed的钩子内将变量scrollWatch设为false;这样就解决了滚动监听在别的组件内仍会运行的问题。

<script>
import $ from 'jquery';
export default {
 data () {
 return {
  scrollWatch: true
 }
 },
 mounted() {
 $(window).scrollTop(0);
 $(window).on('scroll', () => {
  if (this.scrollWatch) {
   //your code here
  }
  }
 });
 },
 destroyed () {
 this.scrollWatch = false;
 }
}
</script>

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

Javascript 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 #Javascript
js实现倒计时效果(小于10补零)
Mar 08 #Javascript
详解Vue监听数据变化原理
Mar 08 #Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 #Javascript
Vue 父子组件、组件间通信
Mar 08 #Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 #Javascript
vue-resourse将json数据输出实例
Mar 08 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue实现弹幕功能
2019/10/25 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
使用numba对Python运算加速的方法
2018/10/15 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
社会实践心得体会
2014/01/03 职场文书
优良学风班申请材料
2014/02/13 职场文书
节约能源标语
2014/06/17 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
家长意见书
2015/06/04 职场文书
MySQL 数据类型详情
2021/11/11 MySQL