功能说明:本例子采用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. 2017-2018-1 20155231 课堂测试 (ch06)

    2017-2018-1 20155231 课堂测试 (ch06) 1 (单选题|1分) 下面代码中,对数组x填充后,采用直接映射高速缓存,所有对x和y引用的命中率为(D) A .1 B .1/4 C ...

  2. java中package import区别

    他们两个是互逆过程package freedom.bean;将你这个类放在了/freedom/bean/这个文件夹下面要使用的话import freedom.bean.*;导入这个类

  3. 17-[模块]-time&datetime

    1.表示时间time方式 在Python中,用三种方式来表示时间,分别是时间戳.格式化时间字符串和结构化时间 1.时间戳(timestamp):也就是1970年1月1日之后的秒, 例如15063882 ...

  4. SpringCloud-声明式Rest调用Feign(四)

    前言:一般情况下我们通常使用RestTemplate来实现声明式远程调用,但是当参数过多,那么效率就会变得很低,并且难以维护,所以在微服务当中也有声明式Rest调用的组件Feign 一.Feign简介 ...

  5. 2018年美国大学生数学建模竞赛(MCM/ICM) F题解题思路

    任务一:开发价格点,建立综合定价模型. 其中 a 代表开发价格点系数,代表个人财产评估.K 为 PI 交易系数 以这个进行评估,将个人划分为具有合理相似性的子组: 当 a 等于 0-30 时,子组为: ...

  6. 私有Docker仓库login Error response from daemon: Get https://x.x.x.x/v2/: dial tcp x.x.x.x:443: connect: connection refused

    一.登陆私有仓库错误: docker login --username=evan 192.168.0.203 Error response from daemon: Get https://192.1 ...

  7. Java实现斗地主发牌(Collections工具类的应用)

    package com.doudou_01; import java.util.ArrayList; import java.util.Collections; import java.util.Li ...

  8. python接口自动化2-发送post请求

    发送post的请求参考例子很简单,实际遇到的情况却是很复杂的,首先第一个post请求肯定是登录了,但登录是最难处理的.登录问题解决了,后面都简单了. 一.查看官方文档 1.学习一个新的模块,其实不用去 ...

  9. CSS基础范例

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

  10. Netty源码分析第2章(NioEventLoop)---->第5节: 优化selector

    Netty源码分析第二章: NioEventLoop   第五节: 优化selector 在剖析selector轮询之前, 我们先讲解一下selector的创建过程 回顾之前的小节, 在创建NioEv ...