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. curl的Get请求,封装方法

    //GET请求//参数1是请求的url//参数2是发送的数据的数组//参数3是其他GET选项private function curlGET($url, array $get = array(), a ...

  2. 使用npm私有服务器保存公司内部强业务类型组件(一):npm私有服务器搭建

    1:安装centOS虚拟机 2:安装完成虚拟机后完成后开启系统网卡: 进入到/etc/sysconfig/network-scprits/ 打开ifcfg-ens33文件 找到 ONBOOT=NO 改 ...

  3. HTL里面使用sling model的时候传参问题

    Question: Can we pass in parameters? <div data-sly-use.myClass=”${ ‘mysite.myproject.HeaderCompon ...

  4. php 根据输入的参数,获取上季度最后一个月的时间

    public function getTime( $time ='2017-06-01 00:00:00'){ $month = date('m',strtotime($time)); $season ...

  5. 【javascript】数据类型中的一些小知识点

    1. undefined 和 null undefined是一个变量而不是一个关键字,所以可以被重新赋值.为了避免歧义,一般推荐用void 0 来获取undefined: null是一个关键字,所以可 ...

  6. 如何正确可视化RAW(ARW,DNG,raw等格式)图像?

    为了正确可视化RAW图像,需要做好:白平衡.提亮以及色彩映射. import numpy as np import struct from PIL import Image import rawpy ...

  7. Git - 生成 ssh key for Mac

    终端: cd ~/ .ssh 生成 SSH KEY ssh-keygen -t rsa -C 你的油箱 前往以下目录找到生成好的 SSH KEY /Users/wzz/.ssh/id_rsa.pub

  8. Asp.Net Core基于JWT认证的数据接口网关Demo

    近日,应一位朋友的邀请写了个Asp.Net Core基于JWT认证的数据接口网关Demo.朋友自己开了个公司,接到的一个升级项目,客户要求用Aps.Net Core做数据网关服务且基于JWT认证实现对 ...

  9. Delphi indy线程控件TIdThreadComponent的使用

    当程序需要做耗时操作,例如访问数据库获取较多的数据.获取大文件MD5.网络访问数据量比较大.界面需要频繁刷新等等,都可以用线程来解决界面卡顿的问题,从而优化用户体验. 在知道TIdThreadComp ...

  10. Spring Boot 小技巧

    初始化数据 我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用 Jpa,另外一种是 Spring JDBC .两种方式各有区别下面来详细介绍. 使用 Jpa 在使用s ...