详解使用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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
jQuery 联动日历实现代码
May 31 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
js控制div弹出层实现方法
May 11 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 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中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
为你总结一些php信息函数
2015/10/21 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
jquery.validate使用详解
2016/06/02 Javascript
canvas知识总结
2017/01/25 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python plotly画柱状图代码实例
2019/12/13 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
关于元旦的广播稿
2014/02/16 职场文书
法律进学校实施方案
2014/03/15 职场文书
有关环保的标语
2014/06/13 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
大学校园招聘会感想
2015/08/10 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技