错误说明:在切换路由以后,依旧在其他页面触发了scroll有关的函数,

错误原因:在spa项目中,window对象是不变的,所以每次使用后需要销毁。

解决办法:vue的生命周期destroyed中销毁就可以了

js方法封装:

export default {
//移动端iframe缩略图滚动后固定定位
iframeScroll:{
scrollFun:function(){ //滚动执行的方法
var top = $(document).scrollTop();
if(top >=95){
$(".step_global .iframe_box").addClass("fixed");
}else{
$(".step_global .iframe_box").removeClass("fixed");
}
},
fixed:function(){
window.addEventListener('scroll',this.scrollFun);
},
//window.scroll需要销毁
destroy:function(){
window.removeEventListener('scroll',this.scrollFun)
}
}, }

引入:

import common from '../../script/common';

使用:

mounted(){
common.iframeScroll.fixed();
},
destroyed(){
common.iframeScroll.destroy();
},

vue监听scroll使用报错的解决办法的更多相关文章

  1. 经查-- git使用报错及解决办法

    git push 错误 error: failed to push some refs to 'git@github.com:charblus/ ...' 本地和远程的文件应该合并后才能上传本地的新文 ...

  2. Python安装xlrd和xlwt的步骤以及使用报错的解决方法

    一.安装xlrd和xlwt功能模块步骤 1.使用python -V查看python的版本号,并查看python安装环境,是否安装成功:   2.可以通过官网(python官网:https://pypi ...

  3. 解决PHP7无法监听9000端口问题/502错误解决办法

    问题背景 昨晚帮配置nginx+php服务的时候,发生了一个奇怪的事情netstat -anp|grep 9000查看9000端口,一直没有监听,于是nginx无法通过fastcgi来代理php请求. ...

  4. 解决PHP无法监听9000端口问题/502错误解决办法

    问题背景 配置nginx+php服务的时候,发现网站能打开html,打开php文件就显示502,一般这个是php没启动啊啥的导致不能正常解析php文件. 原因分析 因为nginx解析php文件是交给f ...

  5. 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  6. 如何在vue中监听scroll,从而实现滑动加载更多

    首先需要明确3个定义: 文档高度:整个页面的高度 可视窗口高度:你看到的浏览器可视屏幕高度 滚动条滚动高度: 滚动条下滑过的高度 当 文档高度 = 可视窗口高度 + 滚动条高度  时,滚动条正好到底. ...

  7. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  8. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

  9. adb驱动安装和使用报错笔记

    adb驱动安装 adb驱动下载地址:https://adb.clockworkmod.com/ 安装时候选择一个容易记住的路径,这个很重要,因为adb驱动没有自动配置环境变量,所以实验时候将adb安装 ...

随机推荐

  1. CentOS7 64位 安装MySQL5.7

    安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo ...

  2. Java面试常见算法题

    1.实现字符串反转 提供七种方案实现字符串反转 import java.util.Stack; public class StringReverse { public static String re ...

  3. Tp3.2 和 Tp5.0之间的区别

    5.0版本和之前版本的差异较大,本篇对熟悉3.2版本的用户给出了一些5.0的主要区别. URL和路由 5.0的URL访问不再支持普通URL模式,路由也不支持正则路由定义,而是全部改为规则路由配合变量规 ...

  4. mac ox下android 通过battery-historian进行电量分析

    简单介绍下如何用battery-historian进行电量分析,因为battery-hostorian是基于go语言的框架,所以需要安装go 1.安装go 2.配置go环境变量到.bash_profi ...

  5. applicaitonContext属性未注入, 请在applicationContext.xml中定义SpringContextHolder.

    我用的jeesite框架,在使用定时任务时,出现一些问题,,1.在windows上项目可以在tomcat下,运行2.在linux下项目在tomcatgh下,却出现问题: 15-Dec-2017 15: ...

  6. Java爬虫——网易云热评爬取

    爬取目标网址 :   http://music.163.com/#/song?id=409649818 需要爬取信息 :   网易云top13热评 使用之前的 HttpURLConnection 获取 ...

  7. Docker 运行Tensorboard 和 jupyter的正确方法

    Docker 运行Tensorboard 和 jupyter的正确方法 网上找了很多方法都是jupyter 运行正常但不知道如何打开Tensorboard.折腾了很久,实验很多中方法最终找到了一个正确 ...

  8. Android之通过网络播放一首简单的音乐

    首先,附上程序执行后的效果.例如以下图所看到的: 一.部署一个web项目到tomcatserver上: 1.这个小程序是结合网络来播放一首音乐的,首先,把我们搞好的一个web项目放置在tomcat安装 ...

  9. handler 源代码分析

    handler Looper 轮询器 MessageQueue 消息对象 1 主线程在一创建的时候就会调用, public static void prepareMainLooper() {}构造方法 ...

  10. 回溯法之求n个集合的幂集

    幂集:有一个集合A,集合A的幂集是由集合A的全部子集所组成的集合. 集合中的每一个元素仅仅有两种状态:属于幂集的元素集或不属于幂集的元素集. 集合{1,2,3},用一棵二叉树来表示. 递归函数 voi ...