1.3.0 • Published 1 year ago
virtual-scroll-list_ferying v1.3.0
virtual-scroll-list_ferying
虚拟滚动列表(react版本)
插件功能说明:
可满足列表元素固定、不固定、动态等情况的虚拟滚动列表
开发环境说明:
node: v16.13.2 react: v18.2
插件使用方式:
npm install virtual-scroll-list_ferying --save
<VirtualScrollList
wrapperStyle={{ width: '300px', height: '400px' }} // 容器样式
estimatedItemHeight={40} // 列表元素的高度;如果列表高度不固定,则此值为预估高度值,用作初始化时使用
dataList={dataList} // 列表数据源
>
{(props: any) => {
// 使用renderProps渲染列表的每项内容
// record:object 当前列表项的所有信息
// onChangeItem:function 操作动态高度列表时调用,用来更新缓存的列表信息
const { record, onChangeItem } = props;
return (
<div className='row-item'>
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h3>index_{record.index}</h3>
// 动态操作展示的数据
{record.content.length > 5 && (
<>
{record.showAll ? (
<button onClick={() => onChangeItem(record.index, 'close')}>收起</button>
) : (
<button onClick={() => onChangeItem(record.index, 'open')}>查看全部</button>
)}
</>
)}
</header>
{record.showAll
? record.content.map((item: string, i: number) => <div key={i}>{item}</div>)
: record.content.slice(0, 5).map((item, i) => <div key={i}>{item}</div>)}
</div>
);
}}
</VirtualScrollList>