vue监听scroll的坑的解决方法

发布时间 - 2026-01-11 03:08:44    点击率:

最近开始用vue写个小项目,踩了不少坑,这里记录下爬坑过程,给有同样经历的人帮助。

问题

今天想在vue的项目里面用下拉加载,然后就直接写了:

但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁。

解决办法

我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了。

使用throttle出现的新问题

下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发,所以优化代码成这样:

然后发现没法用removeEventListener了,因为这个函数第二个参数不接受匿名函数。

最后代码

用一个变量中转下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# vue监听scroll  # vue.js  # 监听scroll  # vue  # scroll  # vue使用@scroll监听滚动事件时  # @scroll无效问题的解决方法详解  # 使用vue.js在页面内组件监听scroll事件的方法  # vue监听滚动事件的方法  # vue中监听scroll事件失效的问题及解决  # 的人  # 加载  # 看了  # 在这个  # 第二个  # 写了  # 解决办法  # 不接受  # 大家多多  # 就可以  # 看到了  # 文档  # 使用了  # 我发现  # 没法用  # 然后就  # style  # text  # strong 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 微信小程序制作网站有哪些,微信小程序需要做网站吗?  Laravel如何升级到最新版本?(升级指南和步骤)  如何在腾讯云服务器快速搭建个人网站?  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程?  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel如何处理异常和错误?(Handler示例)  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  Laravel如何编写单元测试和功能测试?(PHPUnit示例)  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  如何撰写建站申请书?关键要点有哪些?  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  专业型网站制作公司有哪些,我设计专业的,谁给推荐几个设计师兼职类的网站?  如何获取免费开源的自助建站系统源码?  UC浏览器如何设置启动页 UC浏览器启动页设置方法  如何获取上海专业网站定制建站电话?  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  购物网站制作费用多少,开办网上购物网站,需要办理哪些手续?  高端企业智能建站程序:SEO优化与响应式模板定制开发  浅谈Javascript中的Label语句  如何快速搭建安全的FTP站点?  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Java遍历集合的三种方式  香港网站服务器数量如何影响SEO优化效果?  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  canvas 画布在主流浏览器中的尺寸限制详细介绍  开心动漫网站制作软件下载,十分开心动画为何停播?  如何在Windows虚拟主机上快速搭建网站?  Laravel如何实现本地化和多语言支持?(i18n教程)  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Swift中循环语句中的转移语句 break 和 continue  中国移动官方网站首页入口 中国移动官网网页登录  Python数据仓库与ETL构建实战_Airflow调度流程详解  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  教你用AI润色文章,让你的文字表达更专业  韩国代理服务器如何选?解析IP设置技巧与跨境访问优化指南  Python面向对象测试方法_mock解析【教程】  英语简历制作免费网站推荐,如何将简历翻译成英文?  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  javascript中的try catch异常捕获机制用法分析  使用豆包 AI 辅助进行简单网页 HTML 结构设计  如何用5美元大硬盘VPS安全高效搭建个人网站?  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  Laravel用户密码怎么加密_Laravel Hash门面使用教程  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel怎么使用Intervention Image库处理图片上传和缩放