详解使用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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
vue开发简单上传图片功能
Jun 30 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php 文章采集正则代码
2009/12/28 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
深入理解Django的自定义过滤器
2017/10/17 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
《莫泊桑拜师》教学反思
2014/04/23 职场文书
施工单位安全责任书
2014/07/24 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
先进学校事迹材料
2014/12/30 职场文书
家长评语怎么写
2014/12/30 职场文书
论文答谢词
2015/01/20 职场文书
大学生党员个人总结
2015/02/13 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
交通安全学习心得体会
2016/01/18 职场文书
《法国号》教学反思
2016/02/22 职场文书
创业计划书之花店
2019/09/20 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android