Vue中添加滚动事件设置的方法详解


Posted in Javascript onSeptember 14, 2020

一、问题发现

在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件, 经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件。

<div @scroll='showOut'></div>

二、原因分析

暂无

三、解决办法

1.直接利用mousewheel事件替代scroll事件

<div @mousewheel='showOut'></div>

mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。

2.类似于原生JS添加滚动事件

new Vue({
    el:'#app',
    data:{
        scroll:'0'
      
    },
    methods:{
      // showOut: function ( ) {
      // console.log('hhhhh')

      // }
      scrollDs : function ( ) {
        // 页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。
        // 页面没有DTD,即没指定DOCTYPE时,使用document.body。
        this.scroll = document.documentElement.scrollTop
        console.log(this.scroll)
        
      }
    },
    // created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    // mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    mounted(){
      // addEventListener 方法用于向指定元素添加事件
      // 参数1:必选 事件名 例如: click , scroll , mouseenter 
      // 参数2:必选 指定事件触发时的执行函数
      // 参数3:可选 布尔值 指定事件是否咋在捕获或冒泡阶段执行
      // true - 事件在句柄捕获阶段执行
      // false - 事件句柄冒泡阶段执行
      window.addEventListener('scroll', this.scrollDs , true)
    },
  })

这种方法既能用滚轮来触发事件也能用光标拖动滚动条触发事件。

总结

到此这篇关于Vue中添加滚动事件设置的文章就介绍到这了,更多相关Vue添加滚动事件设置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
swiper自定义分页器的样式
Sep 14 #Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 #Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 #Javascript
原生JS实现九宫格抽奖
Sep 13 #Javascript
jQuery实现带进度条的轮播图
Sep 13 #jQuery
js+canvas实现画板功能
Sep 13 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP Smarty模版简单使用方法
2016/03/30 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python 实现两个npy档案合并
2020/07/01 Python
linux面试题参考答案(6)
2014/08/29 面试题
机电一体化专业应届生求职信
2013/11/27 职场文书
行政专员工作职责
2013/12/22 职场文书
会计职业生涯规划书
2014/01/13 职场文书
初三学习计划书范文
2014/04/30 职场文书
商场促销活动策划方案
2014/08/18 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
在Docker容器中部署SQL Server
2022/04/11 Servers