详解使用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 相关文章推荐
JS解析XML实例分析
Jan 30 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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/10/09 PHP
php时间不正确的解决方法
2008/04/09 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
什么是python的id函数
2020/06/11 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
正规的求职信范文分享
2013/12/11 职场文书
开工仪式主持词
2014/03/20 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers