功能说明:本例子采用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. 《Arduino 机器人制作指南》唐乐 分享 pdf下载

    链接:https://pan.baidu.com/s/1cF7gaQoJXwfY0asnsimFrQ提取码:stq1

  2. Python学习之迭代器和生成器

    那么首先什么是迭代器和生成器呢? 迭代器即迭代的工具,那么什么又是迭代呢?所谓迭代:迭代是一个重复的过程,每次重读即一次迭代,并且每次迭代的结果都是下一次迭代的初始值.例: l=[1,2,3] cou ...

  3. 大数据入门第十一天——hive详解(三)hive函数

    一.hive函数 1.内置运算符与内置函数 函数分类: 查看函数信息: DESC FUNCTION concat; 常用的分析函数之rank() row_number(),参考:https://www ...

  4. 4820: [Sdoi2017]硬币游戏

    4820: [Sdoi2017]硬币游戏 链接 分析: 期望dp+高斯消元. 首先可以建出AC自动机,Xi表示经过节点i的期望次数,然后高斯消元,这样点的个数太多,复杂度太大.但是AC自动机上末尾节点 ...

  5. idea ssm项目出现日志中文乱码,封装的json中的msg字段中文乱码(但是json封装的bean中的字段不乱码)等其他各种项目下的中文乱码解决方案

    开头划重点!(敲黑板):rebuild和mvn package的循环往复好几次的操作是解决这个问题的最主要的方法! 经过多次试验,发现这样做就可以正常显示中文了 我说为什么有时候乱码,有时候中文正常, ...

  6. 修复bug有哪些更快的技术?做好这6点就够了

    你有没有想过为什么有时修复错误似乎比它应该花费更长的时间?当你终于找到问题时,事实证明你所需要的只是一个小小的改变.然而,花了很多时间才能找到正在发生的事情.这种情况比我想象的更频繁. 另一方面,当您 ...

  7. C# 连接MongoDB,含用户验证

    配置文件中链接地址:mongodb://test:123456@192.168.168.186:9999/temp 读取配置文件: /// <summary> /// 构造函数 /// & ...

  8. python迭代器的内置函数

    1.迭代器: 内置函数: (1)iter() -__iter__() (2)next() -__next__() 2.迭代器的举例; 对于Fibs数列,我们对其进行 限量输出: 实现代码如下: cla ...

  9. alibaba/Sentinel 分布式 系统流量防卫兵

    Sentinel: 分布式系统的流量防卫兵 Sentinel 是什么? 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多 ...

  10. CSS基础范例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...