vue 监听屏幕高度的实例


Posted in Javascript onSeptember 05, 2018

项目用vue版本是2.0的,项目中用到es6

首先需要在data里面定义页面的高度

data (){
  return {
    fullHeight: document.documentElement.clientHeight
  }
}

把window.onresize事件挂在到mounted

mounted() {
   const that = this
   window.onresize = () => {
    return (() => {
     window.fullHeight = document.documentElement.clientHeight
     that.fullHeight = window.fullHeight
    })()
   }
  }

监听window.onresize事件

watch: {
   fullHeight (val) {
    if(!this.timer) {
     this.fullHeight = val
     this.timer = true
     let that = this
     setTimeout(function (){
      that.timer = false
     },400)
    }
   }
  }

这里的定时器是为了优化,如果频繁调用window.onresize方法会造成页面卡顿,增加定时器会避免频繁调用window.onresize方法

以上这篇vue 监听屏幕高度的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
详解vue 图片上传功能
Apr 30 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
Vue-Router的使用方法
Sep 05 #Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 #Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 #Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 #Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 #Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 #Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 #Javascript
You might like
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
python实现复制整个目录的方法
2015/05/12 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python星号*与**用法分析
2018/02/02 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
appium+python adb常用命令分享
2020/03/06 Python
Python 字典中的所有方法及用法
2020/06/10 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
生日寿宴答谢词
2014/01/19 职场文书
合作经营协议书
2014/04/17 职场文书
前台文员岗位职责
2015/02/04 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android