快應用list組件的那些事兒

本文是個人近段時間在開發快應用過程中，對快應用的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的使用有更深的體會。