当前位置:首页 > 日记 > 正文

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

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

按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用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之Canvas_动力节点Java

JavaScript之Canvas_动力节点Java

学院,节点,动力,电脑软件,JavaScript,Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需…

vue2.0开发入门笔记之.vue文件的生

vue2.0开发入门笔记之.vue文件的生

文件,入门,笔记,电脑软件,vue,这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件,不知道怎么用,以下是关于.vue文件的发现:1、一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js其中template 中写html 代…

jQuery实现的手风琴侧边菜单效果

jQuery实现的手风琴侧边菜单效果

菜单,手风琴,侧边,效果,电脑软件,本文实例讲述了jQuery实现的手风琴侧边菜单效果。分享给大家供大家参考,具体如下:动手做了一个简单手风琴菜单,上图:点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变。先看页面…

js设计模式之结构型享元模式详解

js设计模式之结构型享元模式详解

享元模式,设计模式,结构型,详解,电脑软件,运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销。享元模式主要是对其数据、方法共享分离,将数据和方法分成内部数据、内部方法和外部数据、外部方法。内部方法与内…

jQuery点击头像上传并预览

jQuery点击头像上传并预览

头像上传,电脑软件,jQuery,先给大家展示下效果图: HTML代码<div class="img_show img_show1"> <img src="img2/img06.jpg" width="103" height="103" alt=""> <input type="file" class="upfile" accept="*/*"></div>jQue…

http200、301、304等状态码详解

http200、301、304等状态码详解

状态码,详解,电脑软件,当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求HTTP状态码的英文为HTTP Status…

React中jquery引用的实现方法

React中jquery引用的实现方法

方法,引用,电脑软件,React,jquery,在React中引用Jquery比较好玩,获取元素的数据更多1.引入方法举例:import $ from 'jquery';import { Button } from 'antd';class testJquery extends React.Component {  constructor(props) {   …

如何将应用所有的PPT页面

如何将应用所有的PPT页面

页面,如何将,图片,电脑软件,PPT,  快速将图片应用到所有PPT页面,有两种方法可以解决这个问题。第一种用母板。第二种用PPT背景功能。以下是小编为您带来的关于将图片应用所有的PPT页面,希望对您有所帮助。将图片应用所有的PPT页面方法1:母板…

PPT如何排版才能突出中心主题PPT排

PPT如何排版才能突出中心主题PPT排

方法,主题,中心,技巧,电脑软件,  好的ppt会让人一眼就抓住重点,不会让观众在不重要的内容上浪费太多的时间而忽视演讲者的演讲。也行你已经知道如何吸引观众的眼球,但是你是否了解如何快速抓住观众的心呢?以下小编整理的PPT突出中心的排版…

Webpack实现按需打包Lodash的几种

Webpack实现按需打包Lodash的几种

详解,按需,几种方法,电脑软件,Webpack,前言在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解。ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Loda…

清空元素html |  innerHTML= 与 em

清空元素html | innerHTML= 与 em

推荐,元素,清空,区别,电脑软件,一、清空元素的区别 1、错误做法一: $("#test").html("");//该做法会导致内存泄露 2、错误做法二: $("#test")[0].innerHTML=""; ;//该做法会导致内存泄露 3、正确做…

qq安全中心如何设置禁止登陆游戏qq

qq安全中心如何设置禁止登陆游戏qq

方法,安全中心,登录,设置,游戏,  如果我们不喜欢玩qq游戏,为了保护自己qq账号的安全,我们可以在qq安全中心中设置禁止登陆游戏。你知道qq安全中心如何设置禁止登陆游戏吗?下面就让小编告诉大家qq安全中心设置禁止登陆游戏 的方法。qq安全中…