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安装 ...
随机推荐
- java 之 抽象工厂模式(大话设计模式)
看了几次抽象工厂模式,每次查看都需要重新理解一次,可能是涉及的类和接口比较多,所以比较难缕清的关系吧!在笔者看来,我们还是要吸取其思想而不是生搬硬套. 来看下类图: 大话设计模式-类图 看类图已经很乱 ...
- 老男孩Python视频教程:第一周
认识和尝试Python 备注:老男孩Python视频教程,视频来自网络,在此分享,侵删 对我来说,第一周视频主要解答了以下疑问: 1. Python的三大特点是什么? 答:解释型.动态类型(运行期间才 ...
- CountDownLatch的实现原理
CountDownLatch是java并发包中辅助并发的工具类,目的是让并发运行的代码在某一个执行点阻塞,直到所有条件都满足,这里的条件就是调用countDown()方法,有点类似计数器的功能. 用法 ...
- Java数据结构和算法(八)——递归
记得小时候经常讲的一个故事:从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和尚讲了一个故事,故事内容是“从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和 ...
- 数据库 E-R模型
数据库 E-R模型被定义被两种模型 "实体模型" AND "关系模型" 1.1 实体模型 如图:这是一个"项目表" Project ...
- 深入理解 Promise
自从ES6流行起来,Promise 的使用变得更频繁更广泛了,比如异步请求一般返回一个 Promise 对象,Generator 中 yield 后面一般跟 Promise 对象,ES7中 Async ...
- Maven依赖的是本地工程还是仓库jar包?
相信大家都碰见过maven配置的依赖或者是jar包或者是工程,在开发的过程当中,我们当然需要引入的是工程,这样查看maven依赖的文件的时候,就能直接查看到源码. 一.本地工程依赖 举个例子,其架构如 ...
- 查询linux版本命令
[环境] Ubuntu [本文命令记录] uname -a lsb_release cat /etc/issue cat /proc/version [截图效果] (1)uname -a (2)lsb ...
- SQL Server 全文索引的管理
全文索引不同于常见的聚集索引或非聚集索引,这些索引的内部实现是平衡树(B-Tree)结构,而全文索引在物理上是由一系列的内部表(Internal tables)构成的,这些内部表称作全文索引片段(Fr ...
- 「mysql优化专题」优化之路高级进阶——表的设计及优化(6)
正文:表的设计及优化(真技术文) 优化①:创建规范化表,消除数据冗余 数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表,范式产生于2 ...