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 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
解决VUEX的mapState/...mapState等取值问题
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
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php获取远程文件内容的函数
2015/11/02 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
python使用KNN算法手写体识别
2018/02/01 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
python自定义时钟类、定时任务类
2021/02/22 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
倡议书格式
2014/04/14 职场文书
超市创业计划书
2014/09/15 职场文书
2014年后勤工作总结
2014/11/18 职场文书
职工食堂管理制度
2015/08/06 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Linux系统下安装PHP7.3版本
2021/06/26 PHP