本文是个人近段时刻在开辟快运用过程当中，对快运用的list组件运用的一些体味和踩坑的纪录。会扼要剖析一下快运用中list组件是如何优化和衬着视图的道理。希望能给你开辟快运用带来一些协助。

list组件的运用方法

起首我们来看一下快运用中list组件的运用方法

<list>
    <block for="[1,2,3]">
        <list-item type="item"><text>content{{$item}}</text></list-item>
    </block>
</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中有差别的构造的状况，那末题目来了，当原生端要复用的时刻，构造并不雷同，因而就会致使报错，严峻的时刻甚至会涌现运用闪退。现在快运用的报错机制对前端开辟者不太友爱，这类毛病往往会让你看的一脸懵逼。比方下面这类：

代码

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

报错截图

那末我们怎样来完成list-item内部掌握元素的显现呢，答案是用show属性，因为show属性不转变元素构造，只显现隐蔽元素。

用list模仿scrollview

快运用中没有scrollview组件，所以许多须要转动的场景就须要用list组件来模仿，垂直转动的完成很简单，因为list默许就是垂直转动的，只需设置高度就好了，这里就不再赘述，主要讲一下程度转动的完成。

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

.list {
    height: 300px;
    flex-direction: row;
    .item {
        width: 100px;
    }
}

实在最症结的就是给list组件设置款式flex-direction: row就可以疾速地把垂直转动变成程度转动。

另外list还支撑一个columns属性，这个属机能够协助我们疾速完成瀑布流的规划，固然这些文档中都有提到。发起人人把文档中list教程看一下，会对list的运用有更深的体味。