功能说明：本例子采用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. Scala的文件读写操作与正则表达式

    目录 在本篇博客中你将会学习并了解常用的文件处理任务,例如读取文件的一行文本,本博客的要点包含: Source.fromFile(...).getLines.toArray 输出文件所有行 Sourc ...

  2. 2015306 白皎 《网络攻防》Exp3 免杀原理与实践

    2015306 白皎 <网络攻防>Exp3 免杀原理与实践 一.实践基础 免杀,故名思义,指的是一种能使病毒木马免于被杀毒软件查杀的技术. 免杀的方法有很多,比如加壳改壳.加垃圾指令.以及 ...

  3. 20155327 李百乾 Exp4 恶意代码分析

    20155327 李百乾 Exp4 恶意代码分析 基础问题回答 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所以想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法 ...

  4. 数据增强利器--Augmentor

    最近遇到数据样本数目不足的问题,自己写的增强工具生成数目还是不够,终于在网上找到一个数据增强工具包,足够高级,足够傻瓜.想要多少就有多少!再也不怕数据不够了! 简介 Augmentor是一个Pytho ...

  5. 洛咕 P3961 [TJOI2013]黄金矿工

    甚至都不是树形背包= = 把每条线抠出来,这一条线就是个链的依赖关系,随便背包一下 // luogu-judger-enable-o2 #include<bits/stdc++.h> #d ...

  6. 手把手带你打造一个 Android 热修复框架（上篇）

    本文来自网易云社区 作者:王晨彦 前言 热修复和插件化是目前 Android 领域很火热的两门技术,也是 Android 开发工程师必备的技能. 目前比较流行的热修复方案有微信的 Tinker,手淘的 ...

  7. python实战——教你用微信每天给女朋友说晚安

    但凡一件事,稍微有些重复.我就考虑怎么样用程序来实现它. 这里给各位程序员朋友分享如何每天给朋友定时微信发送”晚安“,故事,新闻,等等··· ··· 最好运行在服务器上,这样后台挂起来更方便. 准备 ...

  8. cookie记住密码/base64加密（js控制）

    cookie记住密码/base64加密(js控制) • 配置cookie //设置cookie function setCookie ( name, value, expdays ) { var ex ...

  9. Jmeter介绍1

    要测试的响应字段: 响应文本:即响应的数据,比如json等文本 响应代码:http的响应代码,比如200,302,404这些 响应信息:http响应代码对应的响应信息,列如OK,Found Respo ...

  10. Loadrunner 性能指标

    https://wenku.baidu.com/view/bf395a1db7360b4c2e3f64ca.html 希望能记住最好记住吧,这个很重要的. qq,979506750多交流