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. python基础知识点(unittest)

    目录: unittest 单元测试框架 1.写用例: Testcase 2.执行:TestSuite 类 TestLoader 类 3.比对结果(期望值/实际值):断言函数 4.结果:TestText ...

  2. Project D | Digital life

    I have a dream. 1999年黑客帝国就已经提出了数字化生命的雏形,近些年的黑镜和其他科幻电影更是脑洞大开,但是生命科学的进展却差强人意. 当今人类世界里有三大复杂系统:以细胞为基础的生命 ...

  3. Idea 里明明配置了Tomcat,但是右上角任然没有Tomcat显示

    问题截图如下: 上图明明配置了Tomcat,但是Idea右上角任然是Add Configurations 因为这个问题,困扰了好久.解决方法: 点击Add Configurations   出现如下界 ...

  4. English trip V2 - 3. A Healthy Diet Teacher:Corrine Key:各种前缀 im- un- in- re- over- under-

    In this lesson you will learn to talk about foot and drink for a healthy diet. 课上内容(Lesson) What do ...

  5. delphi提示“Undeclared identifier”TForm的缺少引用单元列表

    在interface uses  添加TForms;

  6. 【转】解决Android 6.0 NoSuchContextException 和WEBVIEW_undefined 的问题

    在 Android 4.4 操作系统上测试混合应用时,可以直接顺利的在native模式和webview模式之间切换,但是在Android6.0 操作系统上却报NoSuchContextExceptio ...

  7. 2019.3.16数据结构考试(Problem 1. rotinv)(循环逆序对)

    Problem 1. rotinvInput file: rotinv.inOutput file: rotinv.outTime limit: 2 secondsMemory limit: 256 ...

  8. 解决反射型XSS漏洞攻击

    对于程序员来说安全防御,无非从两个方面考虑,要么前端要么后台. 一.首先从前端考虑过滤一些非法字符. 前端的主控js中,在<textarea> 输入框标签中,找到点击发送按钮后,追加到聊天 ...

  9. PHP生成小程序二维码合成图片生成文字

    这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...

  10. excel打开txt格式文件