vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题
在写项目的时候,遇到了需要添加滚动事件的问题,在简书Carol_笑一笑这里找到了解决方案。代码如下
<script>
export default {
name:"vue-scroll",
data () {
return {
……
}
},
mounted: function () {
window.addEventListener('scroll', this.handleScroll, true); // 监听(绑定)滚轮滚动事件
},
methods: {
handleScroll: function () {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 设备/屏幕高度
let scrollObj = document.getElementById(div); // 滚动区域
let scrollTop = scrollObj.scrollTop; // div 到头部的距离
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
if(scrollTop+clientHeight == scrollHeight){
// div 到头部的距离 + 屏幕高度 = 可滚动的总高度
}
}
},
destroyed: function () {
window.removeEventListener('scroll', this.handleScroll); // 离开页面清除(移除)滚轮滚动事件
}
}
</script>
但是在实际应用中,发现移除滚动事件失效了,到达新的页面滚动事件还存在,从而导致一直报错。然后从阮一峰先生的博文中找到了问题所在。
然后上面的代码只需要修改destroyed中的方法即可。
destroyed: function () {
window.removeEventListener('scroll', this.handleScroll,true); // 离开页面清除(移除)滚轮滚动事件
}
返回目录
vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题的更多相关文章
- 【Web】解决简书图片不显示问题“系统维护中,图片暂时无法加载”
简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...
- FLASH CC 2015 CANVAS 中 createjs 移除绑定事件
myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- 简书全站爬取 mysql异步保存
# 简书网 # 数据保存在mysql中; 将selenium+chromedriver集成到scrapy; 整个网站数据爬取 # 抓取ajax数据 #爬虫文件 # -*- coding: utf-8 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- WPF之路-键盘与鼠标事件 - 简书
原文:WPF之路-键盘与鼠标事件 - 简书 键盘事件 事件类型分为以下几个类型 生命周期事件:在元素加载与卸载的时候发生 鼠标事件:鼠标动作 键盘事件:键盘动作 手写笔事件:适用于win7以上的系统 ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- 仿简书MarkDown编辑器可同步滚动
模仿简书的MarkDown编辑器,使用Angular8写的示例 1.支持同步滚动 编辑的过程中,右侧预览界面会同步滚动.滚动右侧预览界面,左侧编辑区也会同步滚动哦 2.支持语法高亮 如下: using ...
- [开源,学习,分享]UWP第三方简书客户端分享
简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...
随机推荐
- MUI 实现下拉刷新上拉加载的简单例子
话不多说,直接上代码与效果图吧. <!doctype html> <html> <head> <meta charset="utf-8"& ...
- ZOJ 4124 拓扑排序+思维dfs
ZOJ - 4124Median 题目大意:有n个元素,给出m对a>b的关系,问哪个元素可能是第(n+1)/2个元素,可能的元素位置相应输出1,反之输出0 省赛都过去两周了,现在才补这题,这题感 ...
- 数学函数(C/C++)
C中包含头文件<math.h> C++包含头文件<cmath> 函数 double cos(double) 该函数返回弧度角(double型)的余弦 double tan(do ...
- 顺序表应用1:多余元素删除之移位算法(SDUT 3324)
Problem Description 一个长度不超过10000数据的顺序表,可能存在着一些值相同的"多余"数据元素(类型为整型),编写一个程序将"多余"的数据 ...
- node中的crypto内置模块
crypto模块的目的是为了提供通用的加密和哈希算法.用纯JavaScript代码实现这些功能不是不可能,但速度会非常慢.Nodejs用C/C++实现这些算法后,通过cypto这个模块暴露为JavaS ...
- ZR#712
消灭砖块 题意: 很多块砖分布在一个 $ m \times m $ 的矩阵中,他可以消掉以他为左上角顶点的一个 $ n \times n $ 的矩阵里的所有砖块.计算可以消掉最多的砖块数(只能消一次) ...
- ZR#710
雷劈数 题意: 现在给出两个整数,求出位于两个整数之间的所有的"雷劈数. 解法: 因为雷劈数特殊的性质,所以在数据范围中的雷劈数实际很少,直接暴力打表就行. CODE: #include&l ...
- Android学习_注意事项
一. Fragment中加载ListView public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle ...
- koa 项目实战(十)使用 validator 验证表单
1.安装模块 npm install validator -D 2.验证注册参数 根目录/validation/register.js const Validator = require('valid ...
- linux系统及命令学习
1,基本概念 Shell(命令行):是一个程序,接受键盘输入的命令,并将命令传递给操作系统进行执行. Bash:Bourne Again Shell, 是大多数linux系统分之中所带的一种shell ...