功能说明：本例子采用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. SEO优化上首页之搜索引擎原理内容处理与索引

    上文<搜索引擎原理SEO优化上首页之蜘蛛Spider>详细介绍了蜘蛛的分类.抓取入口.抓取策略和更新策略.搜索引擎已把页面抓取回来,接下来是解析页面内容,主要包含判断页面类型.提取页面主题 ...

  2. Verilog_Day2

    Verilog_Day1 在CSDN博客上.http://blog.csdn.net/m0_38073085 第三章: 书上基本知识 每个Verilog程序包括4个主要部分:端口定义,I/O说明,内部 ...

  3. JSON解析工具——Jackson的简单使用

    什么是Jackson 可以轻松实现Java对象与JSON字符串的转换 准备工作:导包 Jackson的jar all下载地址:http://jackson.codehaus.org/1.7.6/jac ...

  4. Luogu5110 块速递推

    题面 题解 线性常系数齐次递推sb板子题 $a_n=233a_{n-1}+666a_{n-2}$的特征方程为 $$ x^2=233x+666 \\ x^2-233x+666=0 \\ x_1=\fra ...

  5. 2_C语言中的数据类型 （七）printf与scanf

    1          字符串格式化输出和输入 1.1       字符串在计算机内部的存储方式 字符串是内存中一段连续的char空间,以’\0’结尾 “”是C语言表达字符串的方式 1.2       ...

  6. angularjs 常用方法

    一 angular的copy和extend 1.angular.extend() angular.extend():依次将第二个参数及后续的参数的第一层属性(不管是简单的属性还是对象)拷贝,赋给第一个 ...

  7. SSIS 数据流优化

    一,数据流设计优化 数据流有两个特性:流和在内存缓冲区中处理数据,根据数据流的这两个特性,对数据流进行优化. 1,流,同时对数据进行提取,转换和加载操作 流,就是在source提取数据时,转换组件处理 ...

  8. 判断浏览器是chrome，Opera，Safari，Mac

    function(){ return { isSafari: (navigator.userAgent.indexOf('Safari')>=0 || navigator.userAgent.i ...

  9. Shader开发之烘焙Lightmap自发光

    自己参考Build-in写了一套shader, 写完发现自发光部分在烘焙时不生效, 查阅资料发现需要在Material上设置为对应标记, 这部分功能可以像Standard Shader一样写在Shad ...

  10. C++STL 中的容器整体/逐元素操作方法 少写80%for循环

    本文中示例代码默认已引用 std 命名空间 累加 (std::accumulate) accumulate(begin, end, init, op) 返回给定区间内元素的累加值与给定初值的和,初值不 ...