描述

主要应用长列表加载.解决长列表不固定高度的烦恼，

调用方式

1. 安装vue-long-list-load：

npm install vue-long-list-load --save

2. 项目内调用

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){
       
   }

交流学习邮箱 [email protected]