功能说明：本例子采用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. 链接SQLServer数据库 导出csv文件

    依赖::::<dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId>ms ...

  2. JQuery第三天——CSS操作与JQuery事件

    JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...

  3. Noip前的大抱佛脚----赛前任务

    赛前任务 tags:任务清单 前言 现在xzy太弱了,而且他最近越来越弱了,天天被爆踩,天天被爆踩 题单不会在作业部落发布,所以可(yi)能(ding)会不及时更新 省选前的练习莫名其妙地成为了Noi ...

  4. matplotlib绑定到PyQt5（有菜单）

    稍微复杂地实现matplotlib绑定到PyQt5(有菜单) [知识点] import matplotlib matplotlib.use("Qt5Agg") [效果图] [源代码 ...

  5. 9.12 开课第9天 （JS脚本语音：基础语法、语句）

    全称JavaScript    网页里面使用的脚本语音      非常强大的语言 基础语法:1.注释语法   单行注释//    多行注释/**/ 2.输出语法   alert(信息);  弹出信息  ...

  6. 5322: [Jxoi2018]排序问题

    5322: [Jxoi2018]排序问题 链接 分析: 每次选一个出现次数最小的. 代码: #include<cstdio> #include<algorithm> #incl ...

  7. 2597: [Wc2007]剪刀石头布

    2597: [Wc2007]剪刀石头布 链接 分析: 费用流. 首先转化一下问题,整张图最优的情况是存在$C_n^3$个,即任意3个都行,然后考虑去掉最少不满足的三元环. 如果u赢了v,u向v连一条边 ...

  8. C++ STL 学习笔记__(6)优先级队列priority_queue基本操作

    10.2.7优先级队列priority_queue v  最大值优先级队列.最小值优先级队列 v  优先级队列适配器 STL priority_queue v  用来开发一些特殊的应用,请对stl的类 ...

  9. idea 设置不合并空目录或者包的方法

    不勾选此项即可

  10. JAVAEE Eclipse 控制台用起来感觉很不方便的原因

    这是因为切换成了java面板的原因 因为之前有切换到过 java project 项目,所以才转到了这个面板,之后如果不手动改即便是用javaee也会是这个面板,因而用起来不方便 解决方法: 切换到j ...