React-App实现List虚拟列表-组件库 react-virtualized

最新推荐文章于 2024-06-03 16:02:26 发布

Circle_Key

最新推荐文章于 2024-06-03 16:02:26 发布

阅读量611

点赞数

文章标签： react.js javascript 前端

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

版权

// 引入组件
import React from 'react';

// 引入组件库
import { List, Image } from 'antd-mobile';

// 引入虚拟列表组件库
import { List as VirtualizedList, AutoSizer } from 'react-virtualized';

// 引入列表中用户的用户的数据
const item = [
  {
    id: '1',
    avatar:
      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: '张三',
    description: '消息:11111',
  },
  {
    id: '2',
    avatar:
      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
    name: 'Sara Koivisto',
    description: 'Animi eius expedita, explicabo',
  },
  {
    id: '3',
    avatar:
      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Marco Gregg',
    description: 'Ab animi cumque eveniet ex harum nam odio omnis',
  },
  {
    id: '4',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '5',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '6',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '7',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '8',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '9',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '10',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '11',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '12',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '13',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    id: '14',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
];
//
const data = Array.from(item);
console.log(data);
// 我的界面
export const My = () => {
  // 虚拟列表区域
  // index集合中的行索引
  function rowRenderer({ index, key, style }) {
    const item = data[index];
    return (
      <List.Item
        key={key} //行数组中唯一的键
        style={style}
        prefix={
          <Image
            src={item.avatar}
            style={{ borderRadius: 20 }}
            fit="cover"
            width={40} //图片的宽高
            height={40}
          />
        }
        description={item.description}
      >
        {item.name} {index}
      </List.Item>
    );
  }
  return (
    <div className="Information-div">
      <List>
        <AutoSizer disableHeight>
          {({ width }) => (
            <VirtualizedList
              rowCount={item.length} //要渲染的列表数量
              rowRenderer={rowRenderer} //以函数的形式引入进来
              width={width}
              height={480} //高度
              rowHeight={80} //可以是给定的行高也可以是函数返回的行高
              overscanRowCount={10}
              // style={{
              //   height: '40.7rem',
              //   width: '35rem',
              // }}
            />
          )}
        </AutoSizer>
      </List>
    </div>
  );
};

JSX代码如上

接下来是scss代码

SCSS代码如下

// 广场样式
.Information-div {
  height: 100%;
  width: 100%;
}

// 日期标签样式
.Information-user {
  position: relative;
}

.Information-Day {
  position: absolute;
  right: 4%;
  font-size: 1rem;
}

.Information-ListItem {
  font-size: medium;
}

.Information-List {
  margin-top: 1rem;
}