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. POJ2385——Apple Catching

                                                $Apple~Catching$ Time Limit: 1000MS   Memory Limit: 6553 ...

  2. VUE如何实现切换页面时的过渡动画?

    最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...

  3. C++开发python windows版本的扩展模块示例

    C++开发python windows版本的扩展模块示例 测试环境介绍和准备 测试环境: 操作系统:windows10 Python版本:3.7.0 VS版本:vs2015社区版(免费) 相关工具下载 ...

  4. CentOS_7下安装PHP7.3

    安装mysql:https://www.cnblogs.com/jiangml/p/10402390.html 下载PHP安装包: 官网:http://www.php.net/downloads.ph ...

  5. opencontrail—VXLAN模式下数据包的传输过程

    在这篇文章中,我们将看到VM生成的数据包如何能够到达另一个VM或外部资源,Neutron使用OpenContrail插件的上下文中的关键概念/组件是什么. 我们将重点介绍OpenContrail,它如 ...

  6. nodejs+express创建一个简单的服务器

    //首先安装express //1.引入express const express = require('express'); //2.创建服务器对象 let server = express(); ...

  7. Python爬虫之三

    1)使用Scrapy,什么叫做Scrapy Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据 ...

  8. 码云报错：fatal: remote origin already exists.解决方法

    今天在提交Git的时候,遇到了几个问题,记录一下,方便以后查找O(∩_∩)O 第一个问题 git remote add origin************** fatal: remote origi ...

  9. 深入理解JAVA中的代理模式

    前言 代理是什么 事故现场:我家的宠物今天生病了,而我又没有相关的医学知识,所以我只让我的宠物多喝热水吗? 结果显然是不行的,所以我需要去找宠物医生这些更专业的人来帮我的宠物治病. 这个时候,代理就出 ...

  10. Redis源码 - 事件管理

    Redis 的事件分类 分类 描述 定时器 线程内定时响应,更新缓存时间.关闭非活动的客户端连接等等 pipe 线程间通信,用于其他线程通知主线程退出aeApiPoll() unixsocket 本地 ...