vue2.0 添加监听滚动事件
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 添加监听滚动事件的更多相关文章
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- VUE 实现监听滚动事件,实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
- vue2.0之监听属性的使用心得及搭配计算属性的使用
我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果 ...
- vue-video监听touch事件
vue-video是基于 Vue 的简洁 HTML5 视频播放器组件,但是并没有监听touch事件,也就是说在移动端按键无效. 本文讲述如何改写其vue组件,使其兼容移动端.只需要在其原有的mouse ...
- vue2.0 监听滚动 锚点定位
vue中监听滚动的方法其实可以用: // Chrome document.body.scrollTop // Firefox document.documentElement.scrollTop // ...
随机推荐
- IDEA(添加类注释以及方法注释)
添加类注释: File---Setting----Editor----Code Style-----File and Code Templates--------Class #if (${PA ...
- 找到多个与名为“Home”的控制器匹配的类型
“/”应用程序中的服务器错误. 找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配 ...
- django模型系统(二)
django模型系统(二) 常用查询 每一个django模型类,都有一个默认的管理器,objects QuerySet表示数据库中对象的列表.他可以有0到国歌过滤器.过滤器通过给定参数,缩小查询范围( ...
- zzw原创_linux下的ping6用法
[oracle@sv0379 ~]$ /sbin/ifconfig -aeth0 Link encap:Ethernet HWaddr 00:E0:81:BC:4B:08 ...
- angular6 aot 预先编译
angular.json文件:(红色加粗部分) { "$schema": "./node_modules/@angular/cli/lib/config/schema.j ...
- linux常用命令 awk命令
awk命令 awk [选项] '条件1{动作1} 条件2{动作2}...' 文件名 条件(Pattern) *) 一般使用关系表达式作为条件 *) x>10 判断变量x是否大于10 *) x&g ...
- win10电脑安装win7
1.进入BIOS,关闭“Secure Boot”功能,启用传统的“Legacy Boot”.预装WIN8的系统想要更换WIN7系统首先需要修改BIOS设置.BIOS设置方法:F2进入BIOS,选择se ...
- Java 面试题集锦
都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门的孩纸们,但 ...
- unity 中UGUI制作滚动条视图效果(按钮)
1.在unity中创建一个Image作为滚动条视图的背景: 2.在Image下创建一个空物体,在空物体下创建unity自带的Scroll View组件: 3.对滑动条视图的子物体进行调整: 4.添加滚 ...
- [NOIP2014D2]
T1 Problem 洛谷 Solution 枚举那个点的位置,再O(n)扫一遍求出覆盖的公共场合的数量... 所以时间复杂度为O(128 * 128 * n) Code #include<cm ...