详解使用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模拟类继承小例子
Jul 17 Javascript
js变换显示图片的实例
Apr 16 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
vue component组件使用方法详解
Jul 14 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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 inc文件使用的风险和注意事项
2013/11/12 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python无序链表删除重复项的方法
2020/01/17 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
什么是TCP/IP
2014/07/27 面试题
策划助理岗位职责
2013/11/18 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
政风行风整改方案
2014/10/25 职场文书
员工工作及收入证明
2014/10/28 职场文书
教师求职自荐信范文
2015/03/04 职场文书
陪护人员误工证明
2015/06/24 职场文书