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);   //  离开页面清除(移除)滚轮滚动事件
}

  


返回目录

原文地址:https://www.cnblogs.com/gitByLegend/p/10959300.html

时间: 2024-11-05 12:10:53

vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题的相关文章

献给写作者的 Markdown 新手指南 - 简书

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

简书全站爬取 mysql异步保存

# 简书网 # 数据保存在mysql中; 将selenium+chromedriver集成到scrapy; 整个网站数据爬取 # 抓取ajax数据 #爬虫文件 # -*- coding: utf-8 -*- import scrapy from scrapy.linkextractors import LinkExtractor from scrapy.spiders import CrawlSpider, Rule from jianshu_spider.items import Articl

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

WPF之路-键盘与鼠标事件 - 简书

原文:WPF之路-键盘与鼠标事件 - 简书 键盘事件 事件类型分为以下几个类型 生命周期事件:在元素加载与卸载的时候发生 鼠标事件:鼠标动作 键盘事件:键盘动作 手写笔事件:适用于win7以上的系统 多点触控事件:一个手指或多个手指的触控动作 键盘事件 键盘事件的执行顺序: PrevieKeyDown KeyDown PreviewTextInput TextInput PreviewKeyUp KeyUp 下面以实例代码证实: 在TextBox中分别添加PreviewKeyDown/KeyDo

仿简书MarkDown编辑器可同步滚动

模仿简书的MarkDown编辑器,使用Angular8写的示例 1.支持同步滚动 编辑的过程中,右侧预览界面会同步滚动.滚动右侧预览界面,左侧编辑区也会同步滚动哦 2.支持语法高亮 如下: using System.IO.Compression; #pragma warning disable 414, 3021 namespace MyApplication { [Obsolete("...")] class Program : IInterface { public static

[开源,学习,分享]UWP第三方简书客户端分享

简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_show/id_XMTM2MjU4MjI4NA==.html 基本功能 客户端采用了UWP的技术,所以支持x86,x64,ARM平台,采用了响应式的布局.对手机进行了部分的优化. 对SQLite和本地存储进行了封装,支持缓存. 缓存支持同步和异步的两种方式,分别实现了两个接口: internal in

vue添加新属性不更新原因

一: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html><html><head><meta charset="utf-8"><title>vue $set</title><script

Cordova 代码热更新 - 简书

原文:Cordova 代码热更新 - 简书 Cordova 代码热更新 [图片上传失败...(image-a19be7-1521624289049)] 基于 Cordova 框架能将网页应用 (js, html, css, 图片等) 打包成 App.当 App 在应用商店上架后,如何快速更新是我们需要考虑的问题.?? 本地打包新版本 App 发布到应用商店,但这中发布流程耗费时间,尤其是 Apple Store 应用加载网络资源,这样 App 展示的内容就可以保证是最新的,但当应用断网时,应用就

仿简书、淘宝等等App的View弹出效果

昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四个View,self.view , 图中白色VC的View rootVC.view ,白色VC上的maskView maskView , 以及弹出的popView popView .我们创建它们: self.view.backgroundColor = [UIColor blackColor]; _