export default {
data () {
return {
    isFixed: true
}
},
mounted () {
window.addEventListener('scroll', this.scroll, false)
},
destroyed () {
window.removeEventListener('scroll', this.scroll, false)
},
methods: {
scroll () {
if (document.body.scrollTop >= 280) {
this.isFixed = true
} else {
this.isFixed = false
}
}
}
} 通过vue生命周期的钩子函数,绑定和取消滚动监听事件,可避免滚动事件一直重复绑定,避免其他组件绑定滚动事件

vue2.0 添加监听滚动事件的更多相关文章

  1. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  2. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  3. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

  4. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  5. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  6. VUE 实现监听滚动事件,实现数据懒加载

    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...

  7. vue2.0之监听属性的使用心得及搭配计算属性的使用

    我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果 ...

  8. vue-video监听touch事件

    vue-video是基于 Vue 的简洁 HTML5 视频播放器组件,但是并没有监听touch事件,也就是说在移动端按键无效. 本文讲述如何改写其vue组件,使其兼容移动端.只需要在其原有的mouse ...

  9. vue2.0 监听滚动 锚点定位

    vue中监听滚动的方法其实可以用: // Chrome document.body.scrollTop // Firefox document.documentElement.scrollTop // ...

随机推荐

  1. java异常处理try catch finally

    1       异常 1.1      异常处理的作用 在编程时,如果出现文件打开失败,读写文件就会异常退出.如果出现内存溢出错误,程序也会异常退出.如果不能对这些异常进行处理.程序则无法正常运行.所 ...

  2. windows下面Nginx日志切割

    Nginx本身并不支持日志切割,那么就会造成日志非常的大,为了解决这个问题我们用到了windows的计划任务和dos命令.具体思路: 1.写一个dos文件,通过windows的计划任务定时执行(每天执 ...

  3. (5)TCP和UDP协议

    TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览 ...

  4. .class 缓存

    项目用的是Ant. 场景: Class A{ private static final String HHH="hello"; } Class B{ public void met ...

  5. 【转】TCP、UDP、RTP(RTCP)区别

    转自:https://www.cnblogs.com/imystr/p/4026639.html OSI七层模型OSI 中的层            功能                        ...

  6. C# Timer 定时任务

    C#中,Timer是一个定时器,它可以按照指定的时间间隔或者指定的时间执行一个事件. 指定时间间隔是指按特定的时间间隔,如每1分钟.每10分钟.每1个小时等执行指定事件: 指定时间是指每小时的第30分 ...

  7. 蓝鲸DevOps深度解析系列(2):蓝盾流水线初体验

    关注嘉为科技,获取运维新知 前面一篇文章<蓝鲸DevOps深度解析系列(1):蓝盾平台总览>,我们总览了蓝鲸DevOps平台的背景.应用场景.特点和能力: ​ 接下来我们继续解析蓝盾平台的 ...

  8. numpy 数组索引数组

    在numpy中,数组除了可以被整数索引,还可以被数组索引. a[b]就是已数组b的元素为索引,读取数组a的值. 当被索引数组a是一维数组,b是一维或则多维数组时,结果维度维度与索引数组b相同. a = ...

  9. Activiti流程变量五步曲 ——by fightingKing

    http://blog.csdn.net/zwk626542417/article/details/46648139 一.前言 上一篇文章我们将流程实例的启动与查询,任务的办理查询都进行了介绍,我们这 ...

  10. nigix反向代理

    参考: https://www.cnblogs.com/yycc/p/8185748.html