NUT UI 虚拟列表高度设置

NutUI - 移动端 Vue2、Vue3、小程序 组件库 (jd.com)https://nutui.jd.com/#/zh-CN/component/list虚拟列表可以作为一个触底加载的组件；

在正常的列表展示以及上拉加载中，我们通常使用 NutUI 提供的 滚动加载 组件，那如果我们加载的数据量非常大时，则可能会产生严重的性能问题，导致视图无法响应操作一段时间，这时候我们就用到了虚拟列表组件 List，它可以保证只渲染当前可视区域，其他部分在用户滚动到可视区域内之后再渲染。保证了页面流程度，提升性能。

在性能方面、比以往的渲染机制有很丝滑的提升；

文档描述

API

Props

参数	说明	类型	默认值
height	列表项的高度	Number	50
list-data	列表数据	any[]	[]
container-height v3.1.19	容器高度(最大值不能超过可视区)	Number	可视区高度

Slots

参数	说明	类型
item	列表项数据	Object
index	索引	Number

Events

事件名	说明	回调参数
scroll(将被废弃), scroll-bottom 代替	滚动到底部时触发	-
scroll-bottom v3.1.21	滚动到底部时触发	-

文档中的参数height为模型的单个列表项的高度值

默认平铺当前页面的最大高度

解决方案

使用 100VH做为当前页面的最大单位

height:calc(100vh - 100px);

这样就能表示给与此虚拟列表的高度为最大高度减去某个元素高度的高度；