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. 雷林鹏分享:Laravel 安装

    前面我们介绍我了 composer安装,这里我们接着来介绍 Laravel框架的安装. 这里我们安装的是laravel 4 项目下载地址:https://github.com/laravel/lara ...

  2. 下载 youtube 油管的视频

    以前也曾经用个工具下过,好像是浏览器插件. 但是到底是什么也记不起来了,删没删除,怎么删除的,全都没有记忆了. 唉,无论多么小的事,只有记到本子或者网络上,才能记得住啊. 所以,这回发现了 youtu ...

  3. vs2015编译caffe

    有些时候,需要在python3的环境下import caffe,需要用vs2015在python3的环境下,编译pycaffe. microsoft的windows版本的caffe,依赖的库Nuget ...

  4. 2018-2019-2 网络对抗技术 20165303 Exp3 免杀原理与实践

    实验内容 一. 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellcode编程(1分) ...

  5. 树莓派 连接 JY901(MPU9250) python 代码

    先说BUG,最近要做项目需要树莓派和陀螺仪,资金充足的话肯定是买一个硬件卡尔曼滤波的传感器类似JY901模块,资金不足的就买MPU6050. 网上关于MPU6050在树莓派上的代码还能用,关于JY90 ...

  6. 数据结构与算法之PHP递归函数

    一.递归函数的定义 递归函数即自调用函数,在函数体内部直接或者间接的自己调用自己,即函数的嵌套调用是函数本身. 通常在此类型的函数题中会附加一个条件判断叙述,以判断是否需要执行递归调用,并且在特定的条 ...

  7. centos7版本中ssh相关的设置

    1.设置SSH连接端口1.1.关闭SELinux--关闭系统当前selinux# setenforce 0 --关闭系统永久selinux# sed -i 's/SELINUX=enforcing/S ...

  8. js 浏览器判断

    获取浏览器类型 function getBrowser() { var userAgent = navigator.userAgent //取得浏览器的userAgent字符串 var isOpera ...

  9. linux服务器开机启动tomcat

    程序自启动脚本实质上就是一个shell脚本.以简单的Tomcat自启动脚本为例,Tomcat使用安装目录下的startup.sh启动.shutdown.sh停止,我们可以把它们写到一个启动脚本里. 1 ...

  10. js 数据处理

    开发过程中经常遇到 1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12} ...