功能说明：本例子采用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. react fake double , bind click and dblclick on the same element

    smartClick:function(id,name,waiter,e){ var desk = $$(e.currentTarget).data('raw'); if(this.lastClick ...

  2. 解读Web应用程序安全性问题的本质

    转自 http://blog.csdn.net/iwebsecurity/article/details/1688304 相信大家都或多或少的听过关于各种Web应用安全漏洞,诸如:跨site脚本攻击( ...

  3. Linux常用文件权限控制命令

    一,查看文件属主属组ls -l [root@localhost app]# ls -l total 302832 drwxr-xr-x. 4 lhc lhc 4096 Nov 18 16:05 apa ...

  4. linux编译安装aria2

    一.安装aria2  [root@192-168-7-77 ~]# wget https://github.com/aria2/aria2/releases/download/release-1.33 ...

  5. 提交到开源git时出现:fatal: refusing to merge unrelated histories的解决办法

    解决办法   创建本地库和fetch远程分支这些前面的步骤这里略过.可以自行百度. 解决办法: 1.cmd进入项目的根目录. 2.执行下面的命令:git pull origin master --al ...

  6. P4047 [JSOI2010]部落划分

    显然二分答案\(mid\),然后距离\(\leq mid\)的点对只能放在一个部落里.然后可以并查集\(O(n^2)\)算出有多少个部落. // luogu-judger-enable-o2 #inc ...

  7. 【PaPaPa】实现缓存决策 - 让你的缓存变的有智慧

    我有话说 本来这一篇我打算放到后面再说,可是之前泄漏了一点关于缓存决策的代码后被好多人催更了. 在此感谢大家的支持,让我更有动力的写这个系列.你们的关注让我觉得我的决定是对的,我会坚持下去把这个项目做 ...

  8. JAVA枚举操作（获取值，转map集合）

    JAVA枚举相对来说比.NET的枚举功能强大,感觉就像是一种简化版的类对象,可以有构造方法,可以重载,可以继承接口等等,但不能继承类,JAVA枚举在实际开发中应用相当频繁,以下几个封装方法在实际开发中 ...

  9. 如何fork比特币的源码并同步更新到本地

    一.首先在Github上fork比特币源码,就会在自己的项目库里创建一份比特币代码的拷贝.   打开https://github.com/bitcoin/bitcoin,点击右上角的“Fok”图标,稍 ...

  10. jQuery的$ .ajax防止重复提交的方法

    没啥说的直接贴代码,很简单: 第一种方式:的onclick点击事件类型 <SCRIPT> function member_del(obj,id){ var lock = false; // ...