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 $(document).ready() 与window.onload的区别
Dec 28 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 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
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php二分查找二种实现示例
2014/03/12 PHP
php调整服务器时间的方法
2015/04/03 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
javascript中的throttle和debounce浅析
2014/06/06 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
scrapy-splash简单使用详解
2021/02/21 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
毕业生就业自荐信
2013/12/04 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
金陵十三钗观后感
2015/06/04 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python