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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
php错误级别的设置方法
2013/06/17 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
几道Java和数据库的面试题
2013/05/30 面试题
销售助理岗位职责
2014/02/21 职场文书
学习经验交流会主持词
2014/04/01 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015年外联部工作总结
2015/04/03 职场文书
员工开除通知书
2015/04/25 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers