vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<style type="text/css">
#box {
width: 100%;
height: 2000px;
}
</style>
</head>
<div id="box"></div> <body>
<!-- vue监听滚动事件 -->
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data() {
return {
scroll: ''
}
},
methods: {
menu() {
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
console.log(this.scroll)
}
},
mounted() {
window.addEventListener('scroll', this.menu)
},
})
</script>
</body> </html>
vue监听滚动事件，实现滚动监听的更多相关文章
- 监听table滚动事件，滚动到底部时加载数据
mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...
- mui 怎样监听scroll事件的滚动距离
var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...
- js滚动事件实现滚动触底加载
移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- onscroll 元素滚动事件
阻止事件冒泡 event.stopPropagation(); children():查找合集里面的第一级子元素.(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点 ...
- Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
随机推荐
- 用jdk在cmd下运行编译java程序
1.首先通过创建一个txt文档,将java代码写入txt文档中保存 2.将保存好的HelloWorld.txt文档重命名为HelloWorld.java文件. 3.打开windows中的"命 ...
- 一个RESTful+MySQL程序
前言 本章内容适合初学者(本人也是初学者). 上一章内容(http://www.cnblogs.com/vanezkw/p/6414392.html)是在浏览器中显示Hello World,今天我们要 ...
- FTP与TFTP
文件传输协议如今有了很大的广泛,他屏蔽了计算机内部的实现细节,因为可以适用于各种计算机之间文件的传输. 文件咋网络中传输其实是一件很复杂的事情,涉及的问题有很多,比如 (1)计算机存储数据的格式不同 ...
- 几分钟看完 flow.ci 全部功能
从 0 到 1,从邀请式内测到收费上线,flow.ci 经历了十个多月的沉淀与打磨.这期间,flow.ci 工程师们奋力赶工,进行了一系列的大功能更新,Bug 修复,功能优化. 这篇文章记录了 flo ...
- Excel与XML相互转换 - C# 简单实现方案
Excel与XML相互转换 - C# 简单实现方案 在日常工作中,我需要将数据存储在Excel中进行数据分析和处理,然后再将数据转换为XML格式进行跨平台的数据交换.网上搜索Excel转换为XML的实 ...
- EFcore与动态模型（三）
紧接着上面的内容,我们继续看下动态模型页面交互实现方式,内容如下: 1,如何实现动态表单 2,如何接收表单数据并绑定到动态模型上 一.如何实现动态表单 由于模型信息都是后台自定义配置的,并不是固定不变 ...
- H5微信播放全屏问题
在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题 解决办法:给vi ...
- JavaScript设计模式之构造器、模块和原型
JavaScript面向对象 JavaScript是一种无类语言,但可以使用函数来模拟,这就涉及到设计模式.模式是一种已经验证过的可复用的解决方案,可用于解决软件设计中遇到的常见的问题,通常将这些解决 ...
- Jmeter+Badboy实战经验三 Jmeter关联相关知识
1. 什么时候需要使用关联? 有些参数是动态变化的,获取之后,再次操作的时候,参数的值已经发生了变化,这种情况下就会出现脚本不可运行的问题,就需要用到了关联 2. 关联是什么概念? 3.jmeter ...
- Springboot启动源码详解
我们开发任何一个Spring Boot项目,都会用到如下的启动类 @SpringBootApplication public class Application { public static voi ...