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. [ffmpeg] 定制滤波器

    如果有定制ffmpeg滤波器的需求,有两个结构体是必须要了解的:AVFilter.AVFilterPad,所定制的滤波器主要就是通过填充这两个结构体来实现的.我们下面将详细解析这两个结构体,并通过对滤 ...

  2. Glide和Picasso的区别

    首先简单的介绍下两个库的出身: Picasso是Square公司出品的一款非常优秀的开源图片加载库Glide是由Google开发,基于 Picasso,依然有保存了Picasso的简洁风格,但是在此做 ...

  3. MongoDB启动报错 32-bit servers don't have journaling enabled by default. Please use --journal if you want durability. 【转】

    之前MongoDB启动的时候是蛮正常的,不知道后来启动报错了,就把粘贴出来查询了.最后才知道是由于自己不正常的关闭导致的这个情况. --摘录:MongoDB非正常关闭后修复记录 mongod没有后台执 ...

  4. model中的一些处理

    3.setting.py中设置 主要有三个地方需要设置: MEDIA_URL = ‘/media/’,设置该路径为了在模板中定位图片的位置,<img src="{{ MEDIA_URL ...

  5. filter的使用

    (1)什么是filter 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改,判断等,把不符合规则的请求在中途拦截或者修改.或者对响应进行过滤.拦 ...

  6. webstorm开发微信小程序

    参考博客:https://www.cnblogs.com/pansidong/articles/7563155.html

  7. Druid.jar包

    首先了解一下,什么是Druid. Druid是Java语言中最好的数据库连接池,它能够提供强大的监控和扩展功能. Druid是一个JDBC组件,它包括三部分: 1)DruidDriver 代理Driv ...

  8. 新系统添加sshkey/pexpect基本使用

    Ansible密码认证 //配置Inventory [db] 10.10.10.12 10.10.10.162 [db:vars] #给db组下的主机设置变量 ansible_ssh_user=&qu ...

  9. Apache Hadoop 2.9.2 完全分布式部署

    Apache Hadoop 2.9.2 完全分布式部署(HDFS) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.环境准备 1>.操作平台 [root@node101.y ...

  10. Springboot集成Spring Batch

    Spring官网 (https://spring.io/projects/spring-batch#overview)对Spring  Batch的解释: 一个轻量级的.全面的批处理框架,用于开发对企 ...