vue监听scroll使用报错的解决办法
错误说明:在切换路由以后,依旧在其他页面触发了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使用报错的解决办法的更多相关文章
- 经查-- git使用报错及解决办法
git push 错误 error: failed to push some refs to 'git@github.com:charblus/ ...' 本地和远程的文件应该合并后才能上传本地的新文 ...
- Python安装xlrd和xlwt的步骤以及使用报错的解决方法
一.安装xlrd和xlwt功能模块步骤 1.使用python -V查看python的版本号,并查看python安装环境,是否安装成功: 2.可以通过官网(python官网:https://pypi ...
- 解决PHP7无法监听9000端口问题/502错误解决办法
问题背景 昨晚帮配置nginx+php服务的时候,发生了一个奇怪的事情netstat -anp|grep 9000查看9000端口,一直没有监听,于是nginx无法通过fastcgi来代理php请求. ...
- 解决PHP无法监听9000端口问题/502错误解决办法
问题背景 配置nginx+php服务的时候,发现网站能打开html,打开php文件就显示502,一般这个是php没启动啊啥的导致不能正常解析php文件. 原因分析 因为nginx解析php文件是交给f ...
- 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener
使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...
- 如何在vue中监听scroll,从而实现滑动加载更多
首先需要明确3个定义: 文档高度:整个页面的高度 可视窗口高度:你看到的浏览器可视屏幕高度 滚动条滚动高度: 滚动条下滑过的高度 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底. ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
- adb驱动安装和使用报错笔记
adb驱动安装 adb驱动下载地址:https://adb.clockworkmod.com/ 安装时候选择一个容易记住的路径,这个很重要,因为adb驱动没有自动配置环境变量,所以实验时候将adb安装 ...
随机推荐
- strcmp函数
strcmp函数用于c语言中两个字符串比较(只可以比较字符串,不可以比较数字) 规则 当s1>s2时,返回为正数: 当s1=s2时,返回值为0: 当s1<s2时,返回为负数: 两个字符串自 ...
- SSD: Single Shot MultiBoxDetector英文论文翻译
SSD英文论文翻译 SSD: Single Shot MultiBoxDetector 2017.12.08 摘要:我们提出了一种使用单个深层神经网络检测图像中对象的方法.我们的方法,名为SSD ...
- NIO相关基础篇一
转载请注明原创出处,谢谢! 说在前面 NIO相关知识是很多后续的一些基础知识,所以今天这篇文章仅仅是简单介绍,后续会继续有一到二篇相关NIO内容. 什么是NIO Java NIO( New IO) 是 ...
- 关于ftp的学习:ftp很多人都会用。但会用,不代表我们真正了解它。
ftp.sftp.ftps,您是否是也跟我一样搞不清楚他们的真正意义.它们之间有关联吗(究竟是何种关联),有区别吗(区别倒地在哪里). 亦或是以为自己知道它们,可我们真的了解并认识它们了吗? 如果您被 ...
- UWP 用Thumb 控件仿制一个可拖动悬浮 Button
参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...
- Linux Rsync备份服务介绍及部署守护进程模式
rsync介绍 rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份工具 在常驻模式(daemon mode)下,rsync默认监听TCP端口873,以原生rsync传输 ...
- Android数据存储之内部存储、外部存储
首先来介绍下什么是内部存储? 在Android平台下,有着自己独立的数据存储规则,在windows平台下,应用程序能够自由的或者在特定的訪问权限基础上訪问或改动其它应用程序下的文件资源. 可是在And ...
- ElasticSearch和ElasticSearch Head环境搭建和数据模拟
首先elasticsearch-6.0.0\bin目录下运行elasticsearch服务 修改elasticsearch-6.0.0\elasticsearch.yml文件 在文件最后加入下面代码, ...
- json文件_ajax
html源码代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- Microsoft Graph 桌面应用程序
作者:陈希章 发表于 2017年3月22日 桌面应用程序,在我这篇文章的语境中,我是特指在Windows桌面上面直接运行的.NET应用程序,包括Console Application,WPF Appl ...