vue-long-list-load

描述

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

调用方式

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

交流学习邮箱 [e-mail]