vue项目中onscroll的坑
在项目中需要监听一个组件的scroll事件,以触发到底时加载更多。
但是实际操作下来发现scroll事件并没有被监听到。
通过查询资料得知,监听的目标元素element的scroll事件不冒泡。
解决scroll绑定失败的方法是:scroll直接绑定在window的捕获阶段;
window.addEventListener(‘scroll’,methodName,true);
还有另外一个方式:
使用谷歌浏览器的开发者工具 performance 录制滚动动作,在event log 里查看scroll事件的目标元素,给这个元素绑定scroll事件。如下图:
这里我们发现了scroll事件的目标元素是div.info-bottom,我们直接给它绑定scroll事件就可以了。
vue项目中onscroll的坑
转载
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
window.onscroll无效问题
我的环境:| Grails Version: 3.1.4| Groovy Version: 2.4
window.onscroll onscroll scroll 滚动无效 js -
vue 原生removeEventListner 无效
前言1、Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架2、是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计3、vue + vuex+ vue-resource + vue-router + webpack + es6 + less的项目架构成为了越来越多大公司的第一选择一、创建vue项目1、通过命令创建一个vue项目vue create hello-
vue weex 调用原生toast vue 浏览器调试 样式如何定位样式 vue获取当前选中行的数据 Vue 过渡效果 -
海康视屏流读取 java vue
一、下载开发包 我们需要去海康官网下载h5player@2.0版本的一些用到的文件二、引入开发包 下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里,可以自己单独建一个文件放在里面注意:一定要放在vue中的public文件夹中 否则会报错三、引用下载的文件 &n
海康视屏流读取 java vue javascript 前端 vue.js h5