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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
JS实现吸顶特效
Jan 08 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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
第四节--构造函数和析构函数
2006/11/16 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
深入理解js promise chain
2016/05/05 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Django组件content-type使用方法详解
2019/07/19 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
商务会议邀请函
2014/01/09 职场文书
广告词串烧
2014/03/19 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
正规借条模板
2015/05/26 职场文书
学习经验交流会策划书
2015/11/02 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android