1. 添加属性screenHeight 和 timer。

screenHeight: window.innerHeight

timer: '' //  window.onresize函数频繁调用时，页面抖动较大，设定间隔

2. 在mounted 钩子函数中监听onresize事件

let that = this

window.onresize = () => {

if (!that.timer) {

that.timer = true

setTimeout(() => {

that.timer = false

that.screenHeight = window.innerHeight

}, 600)

}

}

3. h5 新单位 vh,vw

Vue：window.onresize的更多相关文章

  1. window.onresize监听事件

    window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...

  2. window.onresize 事件笔记

     1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里须要注意的是,onresize响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...

  3. window.onresize事件在vue项目中的应用

    //vue页面<template> <div id='echart'> 报表 </div> </template> <script> exp ...

  4. vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  5. vue中使用两个window.onresize问题解决

    在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效.找了下解决方案,可以采用下面的方式写就可以了. window.onresiz ...

  6. window.onresize 多次触发的解决方法

    用了window.onresize但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法. 之前做一个扩展,需要在改变窗口大小的时候保证页面显示 ...

  7. 关于window.onresize

    window.ss1 = function() { alert("aaa") } window.ss = function() { alert("bbb") } ...

  8. Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize

    当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart. ...

  9. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

随机推荐

  1. java篇 之 java概念

    Jvm:java虚拟机,让java拥有跨平台的能力,一次编写,导出运行 Java优点:提供了一个解释性环境(多线程,可执行程序跨平台,加快开发,支持动态更新) 没有指针,有垃圾将回收器(回收内存) 执 ...

  2. rockchip 3128 平台USB接口鼠标U盘功能调试日记

    2019-04-12 关键词: rk3128 OTG.rk3128外接鼠标U盘.RK外接鼠标U盘 本篇文章是笔者根据自己当前所掌握知识对 rk3128 平台 USB 接口接鼠标实现输入功能调试的一个记 ...

  3. [洛谷P1006] 传纸条

    双线程DP的常识:DP的阶段问题:多阶段决策问题 传送门:$>here<$ 题意 n*m的矩阵里,从左上角走到右下角(只能往右或往下),再从右下角走回左上角(只能往左或往上).其中不能重复 ...

  4. termux

    使用http服务,链接原服务器要挂vpn. apt edit-sources 如果提示 $ apt edit-sources e: Sub-process editor returned a n er ...

  5. 第三篇--创建.gitignore文件

    小知识 ·  git add -A  提交所有变化 ·  git add -u  提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) ·  git add .  提交 ...

  6. 在centos 7 下安装 nginx

    在Linux下安装 nginx 1下载对应当前系统版本的nginx包(package) wget  http://nginx.org/packages/centos/7/noarch/RPMS/ngi ...

  7. hbuilder、hbuilderx和vscode对比

    1. 从内存来对比 1.1 vscode占用内存 打开同一个项目,发现vscode占用内存比较多 1.2 HBuilder占用内存 1.3 HBuilderx占用内存 1.4 对比 从内存上来看,HB ...

  8. spring问题

    1.The matching wildcard is strict ,but no declaration can be found for element 'tx:annotation-driven ...

  9. javaWeb使用百度编辑器上传图片的问题

    1.先看项目结构(访问网站:http://localhost:8080/baidu_edit/) 2.部署6个jar包 1)先将jsp/lib的6个jar包放入到WEB-INF/lib文件夹中 2)然 ...

  10. Redis实战（十）Redis常见问题及解决方案

    序言