功能说明：本例子采用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. iOS Bugly符号化使用分析

    前言:一种愉快的开发方式,轻松快速定位BUG,跟开发中的BUG说再见!(公司里开展技术分享会,我就这对Bugly的使用做了个整理) Bugly 使用分析 作者:tangjianfeng 时间:2018 ...

  2. JavaWeb基础—项目名的写法

    ${pageContext.request.contextPath} //jsp中 request.getContextPath() //Servlet中 两者获取到的都是"/项目名称&qu ...

  3. JavaWeb总结（六）

    获取原始表单数据 - POST请求不仅可以传输文本信息还可以传输二进制数据 - 如果想得到请求中参数的原始字节数据,可以使用HttpServletRequest对象提供的getInputSteam() ...

  4. 【HEOI2016】序列

    题面 题解 很像最长不下降子序列对吧(废话) 设$up[i]$和$down[i]$分别表示$i$最大最小能取多少 注意到: $$ f[i] = max_j\left\{f[j]\right\} + 1 ...

  5. 北美KubeCon新风，正把K8S魔力带向边缘计算

    作者:DJ 审校:Kevin·Wang 1. 容器生态圈新的创新方向 2018年容器技术圈的年终盛典北美KubeCon终于在西雅图落下了帷幕.这次北美KubeCon总共吸引了8000多观众参会,创下历 ...

  6. RabbitMQ入门：总结

    随着上一篇博文的发布,RabbitMQ的基础内容我也学习完了,RabbitMQ入门系列的博客跟着收官了,以后有机会的话再写一些在实战中的应用分享,多谢大家一直以来的支持和认可. RabbitMQ入门系 ...

  7. NO--14 微信小程序，左右联动二

    上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示   右左联动.gif 一.关键技术: (1) 小程序 ...

  8. openstack系列文章（一）

    学习openstack的系列文章-虚拟化 虚拟化 KVM CPU 虚拟化 KVM 内存虚拟化 全虚拟化 I/O 设备 半虚拟化 I/O 设备 I/O PCI PCIe 设备直接分配 SR-IOV 在 ...

  9. 不用U盘，用一台好电脑给另一个电脑重装windows10

    先把坏电脑硬盘拆下来,然后挂到好电脑上 把这块盘用系统的磁盘管理工具改成GPT分区表格式,然后整盘分区(NTFS). 再对这个分区进行压缩卷操作,分出第二个区(FAT32格式 大小大于5G 我这里用了 ...

  10. maven摘除jar包中配置文件

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-p ...