@dudulu/autolist
Version:
支持虚拟列表的自动滚动消息框
38 lines (29 loc) • 1.33 kB
Markdown
**React 自动列表显示框:支持虚拟列表的自动滚动消息框。**
- 支持虚拟列表渲染
- 支持自动滚动到最新消息
- 支持对组件样式进行自定义设置
- 鼠标移入/移除,显示/隐藏滚动条
- ---未完待续
| 属性 | 描述 |
| ---------- | -------------------------------------- |
| style | 容器自定义样式 |
| className | 容器自定义类名 |
| isAuto | 是否开启自动滚动最新数据(默认不开启) |
| data | 需要渲染的列表 |
| height | 容器高度 |
| itemHeight | 容器内每个item的高度 |
```tsx
import AutoList from '@dudulu/autolist'; // 导入组件
import '@dudulu/autolist/dist/index.css'; // 导入样式
// ...其他代码
// 组件使用
const data = (num: number) =>
Array(num).fill(0).map((_, index) => <div style={{backgroundColor: '#ff0', height: '50px', border: '1px solid #ccc'}}>{`hahaha-${index}`}</div>)
;
<VirtualList height={500} data={data(num)} itemHeight={50}></VirtualList>
```