[征文]快应用list组件的那些事儿

dadong

本文是个人近段时间在开发快应用过程中，对快应用的list组件使用的一些体会和踩坑的记录。会简要分析一下快应用中list组件是怎样优化和渲染视图的原理。希望能给你开发快应用带来一些帮助。

list组件的使用方法

首先我们来看一下快应用中list组件的使用方法

1. <list>
2. <block for="[1,2,3]">
3. <list-item type="item"><text>content{{$item}}</text></list-item>
4. </block>
5. </list>

复制代码

list只接受list-item和block作为子组件，如果出现其他组件标签，应用会无情的抛出报错。

编译器报错

应用报错

官方文档上注明的list子组件只能是list-item是不严谨的，实际上block也是可以的，原因在于block组件实际上是表达逻辑区块的组件，没有对应的Native组件。

别在list-item中用if

注意：请尽量不要在list-item里面用if来控制元素的显示逻辑

因为list组件原生端做了很多优化，为了提升长列表的性能，type相同的list-item会被复用，也就是说内存中驻留的list-item是有限的，不会随着列表数据增多而变得占用太多内存，这本来是一个非常棒的事情，让开发者不用考虑一个列表中数据太大导致拖慢整个应用速度的问题，也不用考虑没显示出来的list-item的懒加载，因为原生端把这些工作都做了，所以list组件是个非常强大的组件。

但是，成也萧何败萧何，由于list-item相同的会被复用，所以一旦你在list-item中用了if来控制元素的显示逻辑，由于if的控制会导致结构的变化，所以会出现相同list-item中有不同的结构的情况，那么问题来了，当原生端要复用的时候，结构并不相同，于是就会导致报错，严重的时候甚至会出现应用闪退。目前快应用的报错机制对前端开发者不太友好，这种错误往往会让你看的一脸懵逼。比如下面这种：

代码

1. <list>
2. <block for="[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9]">
3. <list-item style="height: 200px;" type="item">
4. <text if="$item === 1">content{{$item}}</text>
5. <image if="$item === 3" src="https://doc.quickapp.cn/assets/images/logo.png"></image>
6. </list-item>
7. </block>
8. </list>

复制代码

报错截图

那么我们怎么来实现list-item内部控制元素的显示呢，答案是用show属性，因为show属性不改变元素结构，只显示隐藏元素。

用list模拟scrollview

快应用中没有scrollview组件，所以很多需要滚动的场景就需要用list组件来模拟，垂直滚动的实现很简单，因为list默认就是垂直滚动的，只要设置高度就好了，这里就不再赘述，主要讲一下水平滚动的实现。

1. <div class="box">
2. <list class="list">
3. <block for="[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9]">
4. <list-item class="item" type="item">
5. <text>content{{$item}}</text>
6. </list-item>
7. </block>
8. </list>
9. </div>

复制代码

1. .list {
2. height: 300px;
3. flex-direction: row;
4. .item {
5. width: 100px;
6. }
7. }

复制代码

其实最关键的就是给list组件设置样式flex-direction: row就能快速地把垂直滚动变成水平滚动。

此外list还支持一个columns属性，这个属性可以帮助我们快速实现瀑布流的布局，当然这些文档中都有提到。建议大家把文档中list教程看一下，会对list的使用有更深的体会。