快應用list組件的那些事兒

Labradors 發布于2019-08-23 13:47 / 1714人閱讀

摘要：本文是個人近段時間在開發快應用過程中，對快應用的組件使用的一些體會和踩坑的記錄。會簡要分析一下快應用中組件是怎樣優化和渲染視圖的原理。

本文是個人近段時間在開發快應用過程中，對快應用的list組件使用的一些體會和踩坑的記錄。會簡要分析一下快應用中list組件是怎樣優化和渲染視圖的原理。希望能給你開發快應用帶來一些幫助。

list組件的使用方法

首先我們來看一下快應用中list組件的使用方法


    
        content{{$item}}

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中有不同的結構的情況，那么問題來了，當原生端要復用的時候，結構并不相同，于是就會導致報錯，嚴重的時候甚至會出現應用閃退。目前快應用的報錯機制對前端開發者不太友好，這種錯誤往往會讓你看的一臉懵逼。比如下面這種：

代碼


    
        
            content{{$item}}

報錯截圖

那么我們怎么來實現list-item內部控制元素的顯示呢，答案是用show屬性，因為show屬性不改變元素結構，只顯示隱藏元素。

用list模擬scrollview

快應用中沒有scrollview組件，所以很多需要滾動的場景就需要用list組件來模擬，垂直滾動的實現很簡單，因為list默認就是垂直滾動的，只要設置高度就好了，這里就不再贅述，主要講一下水平滾動的實現。


    
        
            
                content{{$item}}

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

其實最關鍵的就是給list組件設置樣式flex-direction: row就能快速地把垂直滾動變成水平滾動。

此外list還支持一個columns屬性，這個屬性可以幫助我們快速實現瀑布流的布局，當然這些文檔中都有提到。建議大家把文檔中list教程看一下，會對list的使用有更深的體會。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99565.html

談談Spring-Data的那些事兒

摘要：什么是呢全稱，是提出的一個對象持久化規范，各應用服務器自主選擇具體實現。僅僅只是一個規范，而不是產品使用本身是不能做到持久化的。只要提供了持久化類與表的映射關系，框架在運行時就能參照映射文件的信息，把對象持久化到數據庫中。我們在進行事務處理往往需要和數據庫進行交互，這其中有關系型數據庫（MySql，Sql Server，Oracle）或者是非關系型數據庫（Redis，Hadhoop）...

chinafgj 2019-08-16 10:59 評論0 收藏0
談談Spring-Data的那些事兒

摘要：什么是呢全稱，是提出的一個對象持久化規范，各應用服務器自主選擇具體實現。僅僅只是一個規范，而不是產品使用本身是不能做到持久化的。只要提供了持久化類與表的映射關系，框架在運行時就能參照映射文件的信息，把對象持久化到數據庫中。我們在進行事務處理往往需要和數據庫進行交互，這其中有關系型數據庫（MySql，Sql Server，Oracle）或者是非關系型數據庫（Redis，Hadhoop）...

charles_paul 2019-08-06 13:26 評論0 收藏0