2.0.0 • Published 3 years ago
vue-long-list-load v2.0.0
描述
主要应用长列表加载.解决长列表不固定高度的烦恼，
调用方式
- 安装vue-long-list-load：
npm install vue-long-list-load --save- 项目内调用
import longList from 'vue-long-list-load'
<long-list
ref="vueLongList"
dataKey='id'
scrollWrapId="manWrap"
:dataList="dataList"
:dataComponent="dataComponent"
:componentProps="componentProps"
height=100
>
</long-list>参数说明
| 参数 | 说明 | 类型 | 必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| scrollWrapId | 列表滚动容器id | string | true | — | — |
| dataKey | 节点数据内唯一键值 | String | true | — | — |
| dataList | 列表数据 | Array | true | 具体见下方说明 | — |
| dataComponent | 自定义的节点组件 | — | true | — | — |
| ref | 调用组件内部方法 | string | false | — | — |
| direction | 滚动方向 | Number | false | 0:纵向，1横向 | 0 |
| hideIds | 列表中需要隐藏的节点 | Array | false | 具体见下方说明 | [] |
| height | 节点高度 | Number | false | — | 100 |
| componentProps | 节点组件要传递的参数 | Object | false | — | {} |
| scroll | 滚动区域内滚动回调方法 | Function | false | - | — |
| resized | 某个节点宽高发生变化回调方法 | Function | false | 具体见下方说明 | — |
部分参数说明
<!--假设 dataKey=id-->
<!--列表中需要隐藏的节点-->
hideIds:[1, 2]
<!--列表数据 dataList 内 height 为 **Number**。-->
dataList:[
{id:1,height:100},
{id:2,height:200},
{id:3,height:300},
{id:4,height:300},
{id:5,height:300}
]
<!--节点高度-->
height:100
<!--如果dataList的数据内有height值 不需要设置这个height-->
<!--如果dataList 和 height 都不传递的话，默认为100 可能滚动略有卡顿；-->
<!--建议在每个高度都不相同的时候通过dataList传递，都相同时候通过height传递-->
<!--某个节点宽高发生变化回调方法 返回参数为id 与高度-->
resized(id, height){
}