# taro-list
> 支持下拉刷新 、 加载更多 、虚拟列表
## 安装及使用
```
npm i taro-list
```
[h5 demo](https://raohong.github.io/taro-list-demo/dist/index.html)
小程序 demo
1. 配置文件里添加
```
copy: {
patterns: [
{
from: 'node_modules/taro-list/dist/weapp/components/List/refresh.wxs',
to: 'dist/npm/taro-list/dist/weapp/components/List/refresh.wxs',
},
{
from: 'node_modules/taro-list/dist/weapp/components/List/index.template.wxml',
to: 'dist/npm/taro-list/dist/weapp/components/List/index.template.wxml',
}
]
},
```
2. 使用
```tsx
import Taro from '@tarojs/taro';
import TaroList from 'taro-list'
export default Index() => {
return (
<TaroList height="100vh" onRefresh={cb => {
console.log('刷新');
setTimemout(cb, 1000);
}}>
</TaroList>)
}
```
具体使用可查看 [https://github.com/raohong/taro-list/tree/master/src/pages](https://github.com/raohong/taro-list/tree/master/src/pages)
### taro-list
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| :-----------------: | :-----------------------------: | :----------: | ----------------------- | --------------------------------------------- |
| height | number/string | 0 | 是 | 组件高度，支持 css |
| width | number/string | 0 | 否 | 组件宽度，支持 css |
| className | string | | 否 | 容器类名 |
| style | React.CSSProperties | | 否 | 容器样式 |
| disabled | boolean | | 否 | 禁用下拉刷新 |
| distanceToRefresh | number | 60 | 否 | 刷新距离 |
| damping | number | 200 | 否 | 最大下拉距离 |
| refreshing | boolean | | 否 | 是否处于刷新状态 （最大刷新时间 10s） |
| onRefresh | (onSuccess: () => void) => void | | 否 | 刷新回调函数，参数 onSuccess 调用结束刷新状态 |
| onVirtualListInit | () => void | | 否 | 虚拟列表初始化回调 |
| onLoadMore | () => void | | 否 | 下拉加载更多回调函数 |
| enableBackToTop | boolean | | 否 | 参考 ScrollView enableBackToTop |
| scrollWithAnimation | boolean | | 否 | 参考 ScrollView scrollWithAnimation |
| virtual | boolean | | 否 | 是否启用虚拟滚动 |
| dataManager | object | | 当启用虚拟滚动时， 必传 | VirtualList Data Manager |
| scrollToIndex | number | | 否 | 容器滚动 item index |
| align | ALIGN | ALIGN.CENTER | 否 | 设置 scrollToIndex 滚动时滚动值对其方式 |
### taro-list-data-manager
taro-list-data-manager 文档 [https://github.com/raohong/taro-list-data-manager](https://github.com/raohong/taro-list-data-manager)
taro-list-master.zip （45个子文件） 
taro-list-master 
project.config.json 1KB .eslintrc 528B src 
index.html 1011B pages column index.tsx 5KB index.less 1KB index index.tsx 690B index.less 116B normal index.tsx 2KB index.less 380B list index.tsx 5KB index.less 690B index.ts 78B app.less 195B components List config.ts 436B lodash.throttle index.d.ts 322B index.js 13KB index.tsx 343B index.less 2KB types.ts 1KB index.template.wxml 200B index.weapp.tsx 6KB ComponentResizeObserver.tsx 2KB refresh.wxs 4KB VirtualList CellCache.ts 338B SizeAndPositionManger.ts 6KB index.tsx 8KB types.ts 948B utils.ts 1KB context.ts 307B index.h5.tsx 10KB app.tsx 1KB scripts build.js 1KB .npmignore 184B @types index.d.ts 1KB tsconfig.json 735B config prod.js 452B dev.js 130B index.js 3KB .prettierrc 68B README.md 4KB .editorconfig 197B global.d.ts 408B .gitignore 84B package-lock.json 695KB package.json 3KB
- 1
- 2
前往页