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表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
JS实现可控制的进度条
Mar 25 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
wxPython中文教程入门实例
2014/06/09 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
法律专业自我鉴定
2013/10/03 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang