React虚拟列表Height值解决不同机型适配

最新推荐文章于 2025-04-11 08:36:19 发布

Circle_Key

最新推荐文章于 2025-04-11 08:36:19 发布

阅读量342

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/Circle_Key/article/details/130220274

版权

该文章介绍了在React应用中，如何使用useState,useRef,useEffecthooks以及AutoSizer和VirtualizedList组件，来实时获取和更新浏览器窗口的高度，进而动态调整虚拟列表的高度，优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  import React, { useState, useRef, useEffect } from 'react';

// 浏览器的高度 默认设置为0；
  const [height, setHeight] = useState(0);

  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    setHeight(h);
  };

  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    setHeight(h);

    // 页面变化时获取浏览器窗口的大小
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    };
  }, []);
  // 重新获取页面高度赋值给虚拟列表
  const Height = height - 96;

  // console.log(Height);

直接加入根据页面情况做计算

 <AutoSizer disableHeight>
          {({ width }) => (
            <VirtualizedList
              rowCount={users.length} //要渲染的列表数量
              rowRenderer={rowRenderer} //以函数的形式引入进来
              width={width}
              height={Height} //高度
              rowHeight={400} //可以是给定的行高也可以是函数返回的行高
              overscanRowCount={10}
              // style={{
              //   height: '40.7rem',
              //   width: '35rem',
              // }}
            />
          )}
        </AutoSizer>