封装uniapp的虚拟列表组件

一、新建一个virtual-list.vue





 二、使用(下方代码是我使用的场景,你们可以自定义插槽中的内容)


			
		

 三、参数说明

属性

 sourceData:接收列表数据,传入数组即可

containerHeight:滚动容器的高度,接收例如 200px 的字符串

itemHeight:每条数据所占高度,传入数字,尽量在每一行的高度一致的列表使用,行高度差距非常大时不建议使用

showNum:滚动列表中能看到的行数量,保证 showNum *  itemHeight 大于 containerHeight  即可,可以自行调整数值,滚动顺滑即可

customStyle:自定义列表样式,接收style对象

方法

组件上定义ref="virtualList"

比例tab切换列表重新赋值后使用this.$refs.virtualList.refresh()刷新列表即可

作用域插槽

item

参数row, 数组遍历后单项的数据

你可能感兴趣的:(组件封装,uni-app,vue.js,javascript)