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( ...
随机推荐
- C#在win10（win8）下读写记事本注意事项
分析:由于windows10或者windows8系统机制问题,C#在读写txt文件的时候,可能会出现如下问题(对路径“”的访问被拒绝): 解决: 1.我们在C盘下面新建立一个记事本,会发下类似如下报错 ...
- Windows程序员必须知道的字符编码和字符集
字符编码 (Character encoding) 在存储和传递文本过程中,为了使得所有电脑都能够正确的识别出文本内容,需要有一个统一的规则. 2. 字符集 (Character Set) ) 一般 ...
- jQuery的拾色器
代码如下 1.js <link href="css/farbtastic.css" rel="stylesheet" /> <script t ...
- phpcms如何做企业站--> 替换首页最初操作
首先用一个静态首页的模板,通过cms进行替换做成一个有后台的 首页的替换流程首先要先把静态网页做出来,拿这个页面去替换 页面所有的文件都在这,做静态页面的文件 现在要做的是把这些文件复制一下拿到php ...
- loadrunner工作原理
- java初级开发程序员（第六单元）
1.for循环结构: 循环结构分为四个部分. >初始部分:设置循环的初始状态,如设置记录循环次数的变量i为0. >循环体:重复执行的代码,即输出“好好学习,天天向上!”. >迭代部分 ...
- 浏览器兼容汇总（css+js）
JavaScript 1. HTML对象获取问题 FireFox:document.getElementById("idName");ie:document.idname或者d ...
- jvm系列(七):jvm调优-工具篇
16年的时候花了一些时间整理了一些关于jvm的介绍文章,到现在回顾起来还是一些还没有补充全面,其中就包括如何利用工具来监控调优前后的性能变化.工具做为图形化界面来展示更能直观的发现问题,另一方面一些耗 ...
- es6的解构赋值学习（1）
相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...
- 支持缩放的fresco图片控件 —— fresco sample: ZoomableDraweeView
最近在实现一个类似淘宝中的评论列表的功能,其中要在列表中显示评论图,点击图片后显示大图进行查看,各家app几乎都会有这样的功能. 可以看到,一个体验较好的查看大图的基本功能有, 第一,左右滑动时切换图 ...