功能说明:本例子采用MUI table组件 + React实现。

需求描述:固定表头,列表高度随浏览器窗口的改变而改变。(本例中当窗口高度小于472像素后,便不作限制)

实现简介:1.监听浏览器窗口,每当窗口大小发生改变,给列表高度重新复制;

2. 列表高度通过state来管理。

关键代码:

窗口监听事件管理:

列表高度处理函数:

组件里的设置:

效果图(关键项涂了马赛克...)

窗口高于472px:

窗口高度低于472px(列表边上的滚动条不见了,取而代之的浏览器窗口的滚动条,木有截下来

React监听窗口变化事件的更多相关文章

  1. vue项目如何监听窗口变化,达到页面自适应?

    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...

  2. Java面板Panel的使用,监听窗口关闭事件

    面板Panel的使用 待解决问题: 1.设计模式:适配器模式 2.frame.setLayout(null); package GUI; import javax.swing.*; import ja ...

  3. Angular 监听路由变化事件

    摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toPa ...

  4. Python窗口学习之监听窗口变化触发函数

    在窗口大小发生变化后,往往组件也需要调整 代码: #空间适应屏幕 def window_resiz(self,event=None): print(window.winfo_height()) pri ...

  5. js 监听窗口变化

    window.onresize = function () {.....}jquery $(window).resize(function)

  6. jq监听input-val变化事件

    $('body').on('input propertychange', '.info-number-val-box', function(event) { xxxxx });

  7. 监听窗口大小变化,改变画面大小-[Three.js]-[onResize]

    如果没有监听窗口变化,将会出现一下情况: ![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102081845027-2 ...

  8. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  9. React和Vue中,是如何监听变量变化的

    React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...

随机推荐

  1. hbase、zookeeper及hadoop部署

    一 机器192.168.0.203 hd203: hadoop namenode & hbase HMaster192.168.0.204 hd204: hadoop datanode &am ...

  2. c++ 双向链表 的查找和删除

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...

  3. 利用开源软件 Hugin 实现照片的景深合成

    利用开源软件 Hugin 实现照片的景深合成 本文主要参考了下面的文章:http://macrocam.blogspot.jp/2013/09/using-hugin-for-focus-stacki ...

  4. [算法]用java实现堆操作

    问题描述:(1)建堆:将数组A[1..n]变成一个最大堆.(课本6.3)(2)堆排序:将一个堆中的元素按递减排序输出.(3)用插入方法建堆:堆大小从1到n每次插入一个元素到堆中,直到n个元素入堆.(课 ...

  5. HDU - 5877 Weak Pair (dfs+树状数组)

    题目链接:Weak Pair 题意: 给出一颗有根树,如果有一对u,v,如果满足u是v的父节点且vec[u]×vec[v]<=k,则称这对结点是虚弱的,问这棵树中有几对虚弱的结点. 题解: 刚开 ...

  6. JAVA使用qrcode生成二维码(带logo/不带logo)

    /** * */ package qrcode; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; i ...

  7. 苏州地区--校招IT公司

    完整经历了苏州的秋招和春招,在本校和苏州大学跑了许多次的宣讲会,自认为对苏州IT企业的校招有一个充分的认知.原本打算在苏州找一份Java开发的工作,可是发现自己简历连那些公司的简历关都过不去(对双非学 ...

  8. jenkins的时间与服务器的时间不一致

    解决办法:

  9. 记一次RMI的调用数据失误

    这两天在测试一个Spring RMI接口的时候,出现了个奇怪的问题.Server端返回的数据,到了客户端出现了属性丢失的情况. 类继承体系 .客户端里面定义在ClassA中的属性全部为null. 分析 ...

  10. Centos7 Jenkins

    代码上线 持续集成 随时随地将代码合并,这种方法叫做持续集成. 持续集成(CONTINUOUS INTEGRATION,简称CI)持续集成指的是,频繁地(一天多次)将代码集成到主干.它的好处主要有两个 ...