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. 2>&1 什么意思

    1.  0 表示stdin标准输入 2.  1 表示stdout标准输出 3.   2表示stderr标准错误 意思是:把标准错误重定向到标准输出?

  2. [tomcat] tomcat简析(一)

    1.Tomcat的顶层结构 Tomcat中最顶层的容器叫Server,代表整个服务器,Server中包含至少一个Service,用于 具体提供服务. Service主要包含两部分:Connector和 ...

  3. MySQL Packets larger than max_allowed_packet are not allowed

    MySQL的一个系统参数:max_allowed_packet,其默认值为1048576(1M), 查询:show VARIABLES like '%max_allowed_packet%'; 修改此 ...

  4. canal demo搭建全记录

    一.环境介绍 canal是阿里开源的中间件,主要用于同步mysql数据库变更.具体参见:https://github.com/alibaba/canal/releases 搭建环境: vmware c ...

  5. fetch跨域浏览器请求头待研究

    fetch('https://wwww.baidu.com', {headers: { "Access-Control-Allow-Origin": "*", ...

  6. mysql:mysql is neither service nor target!?(suse12 sp2 )

    今天想在自己的虚拟机上安装mysql,安装好了并且初始化之后,一直无法启动mysql. 1.service mysql start; 报错:mysql is neither service nor t ...

  7. ubuntu 系统开机执行脚本设置

    在ubuntu 系统中常常有一些操作需要开机时手动去执行,有一些固定的脚本文件可以通过改写启动项脚本让系统启动时自动执行 方法: 编辑/etc/下的rc.local脚本,把对应的需要执行的脚本写在ex ...

  8. __name__ __doc__ __package__

    __name__只有主程序调用才可以 如果自己的唯一入口被调用 if __name__ == '__main__' : 才执行下面的代码 """ 这个是format的注释 ...

  9. C++学习笔记:多态篇之虚函数

    一.类型 在引入多态之前,我们先来看一下多态的两种类型: 二.多态性的概念 多态一词最初来源于希腊语,意思是具有多种形式或形态的情形,在C++中是指同样的消息被不同类型的对象接收时导致不同的行为,这里 ...

  10. 版本管理工具小乌龟TortoiseGit的安装和使用(2)

    内容中包含 base64string 图片造成字符过多,拒绝显示