功能说明：本例子采用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. docker 设置映射端口 目录挂载

    docker run -p 3092:9092 -p 3093:9093 -p 3094:9094 -p 3181:2181 --name="kafka_map_port_3092_4_31 ...

  2. Scala(四)：对象

    对象:Object 1.单例对象 2.伴生对象 3.扩展类或特质的对象 4.apply方法 5.应用程序对象 6.枚举1.单例对象 Scala中没有你静态方法或静态字段,可以用object这个语法结构 ...

  3. Caused by: java.lang.IllegalArgumentException: Modifying queries can only use void or int/Integer as return type!

    Caused by: java.lang.IllegalArgumentException: Modifying queries can only use void or int/Integer as ...

  4. jQuery学习-尺寸坐标

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JS组件系列——JsPlumb制作流程图及相关效果详解

    上    篇 前言:之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. Jsplumb官网:htt ...

  6. Python科学计算库-Numpy

    NumPy 是 Python 语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库,也是学习 python 必学的一个库. 1. 读取文件 numpy.gen ...

  7. webgl绘制粗线段

    webgl1不支持设置线段宽度,这就只好通过shader来实现了,参考了踏得网的例子,引用地址:http://wow.techbrood.com/fiddle/43140.先在此感谢踏得网创始人之一 ...

  8. variadic templates & pass by const reference & member operator [] in const map & gcc sucks

    /// bugs code with comments #include <iostream> #include <memory> #include <unordered ...

  9. 深入理解C/C++二维数组

    深入理解C/C++二维数组 前言 本来以为自己对二维数组的理解还可以,没感觉有什么,但是今天小伙伴问了一个问题感觉迷惑了好久,于是决定细致的记录一下,一步一步的探究各种关于二维数组的问题,巩固基础. ...

  10. Ubuntu 16.04安装tensorflow_gpu的方法

    参考资料: Ubuntu 16.04安装tensorflow_gpu 1.9.0的方法 装Tensorflow,运行项目报错: module compiled against API version ...