# 虚拟列表配置 2.2.5

参数 说明 类型 默认值 可选值
use-virtual-list 是否使用虚拟列表

(使用页面滚动或nvue时,不支持虚拟列表。在nvue中z-paging内置了list组件,效果与虚拟列表类似,并且可以提供更好的性能)

(当服务端一次性返回大量数据时,可结合本地分页处理。不能一次性通过complete传上万条数据,否则会导致卡顿,本地分页参见:本地分页配置)

Boolean false true
use-compatibility-mode 2.4.0 在使用虚拟列表时,是否使用兼容模式,兼容模式写法较繁琐,但可提供良好的兼容性。在微信小程序中,推荐使用兼容模式。具体写法请参照demo中的virtual-list-compatibility-demo.vue Boolean false true
extra-data 2.4.0 使用兼容模式时传递的附加数据,可选、非必须 Object null -
cell-height-mode 虚拟列表cell高度模式,默认为fixed,也就是每个cell高度完全相同,将以第一个cell高度为准进行计算。可选值:dynamic,即代表高度是动态非固定的;dynamic性能低于fixed,因此如非必要,请使用fixed

(在dynamic模式下,z-paging会在cell初次加载时缓存cell高度,当cell高度异步变化或cell删除时,请告知z-paging更新内部缓存的高度,具体方法详见:虚拟列表相关方法)

String fixed dynamic
preload-page 预加载的列表可视范围(列表高度)页数,默认为12,即预加载当前页及上下各12页的cell。此数值越大,则虚拟列表中加载的dom越多,内存消耗越大(会维持在一个稳定值),但增加预加载页面数量可缓解快速滚动短暂白屏问题 Number|String 12 -
fixed-cell-height 2.7.8 固定的cell高度,cell-height-mode=fixed才有效,若设置了值,则不计算第一个cell高度而使用设置的cell高度。默认单位为px。

(支持传100、"100px"或"100rpx")

Number|String 0 -
virtual-list-col 2.2.8 虚拟列表列数,默认为1。常用于每行有多列的情况,例如每行有2列数据,需要将此值设置为2

(仅支持cell-height-mode为fixed的情况,即:不支持动态高度的瀑布流)

例:需要设置每行2列的瀑布流时,请设置::virtual-list-col="2":inner-list-style="{'display':'flex','flex-wrap':'wrap'}"(设置inner-list开启flex布局,且子view自动换行)、:inner-cell-style="{width:'50%'}"(设置子view宽度为50%,如果是非内置列表模式,则直接给v-for的item设置width: 50%)
Number|String 1 -
virtual-scroll-fps 虚拟列表scroll取样帧率,默认为80,过低容易出现白屏问题,过高容易出现卡顿问题 Number|String 80 -
use-inner-list 是否在z-paging内部循环渲染列表(使用内置列表),若use-virtual-list为true,则此项恒为true

此模式下使用slot="cell"插入cell;使用slot="header"插入header(在cell顶部且跟随列表滚动);使用slot="footer"插入bottom(在cell底部且跟随列表滚动);

(由于字节跳动小程序不支持slot-scope,因此use-inner-list无法在字节跳动小程序中使用)

(use-inner-list在微信小程序中部分较高版本调试库会报More than one slot named "cell" are found...的警告并导致开发者工具卡顿,将基础库版本调到2.18.0以下即可。因线上没有控制台打印,因此不会影响线上版本。)

Boolean false true
force-close-inner-list 2.2.7 强制关闭inner-list,默认为false,如果为true将强制关闭innerList,适用于开启了虚拟列表后需要强制关闭inner-list的情况 Boolean false true
cell-key-name 2.2.7 内置列表cell的key名称

(仅nvue有效,在nvue中开启use-inner-list时必须填此项)

String "" -
inner-list-style innerList样式 Object {} -
inner-cell-style 2.2.8 innerCell样式 Object {} -