// 引入组件
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;
}
效果图