成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

快應(yīng)用list組件的那些事兒

Labradors / 1792人閱讀

摘要:本文是個(gè)人近段時(shí)間在開發(fā)快應(yīng)用過程中,對快應(yīng)用的組件使用的一些體會和踩坑的記錄。會簡要分析一下快應(yīng)用中組件是怎樣優(yōu)化和渲染視圖的原理。

本文是個(gè)人近段時(shí)間在開發(fā)快應(yīng)用過程中,對快應(yīng)用的list組件使用的一些體會和踩坑的記錄。會簡要分析一下快應(yīng)用中l(wèi)ist組件是怎樣優(yōu)化和渲染視圖的原理。希望能給你開發(fā)快應(yīng)用帶來一些幫助。

list組件的使用方法

首先我們來看一下快應(yīng)用中list組件的使用方法


    
        content{{$item}}
    

list只接受list-itemblock作為子組件,如果出現(xiàn)其他組件標(biāo)簽,應(yīng)用會無情的拋出報(bào)錯(cuò)。?

編譯器報(bào)錯(cuò)

應(yīng)用報(bào)錯(cuò)

官方文檔上注明的list子組件只能是list-item是不嚴(yán)謹(jǐn)?shù)?,?shí)際上block也是可以的,原因在于block組件實(shí)際上是表達(dá)邏輯區(qū)塊的組件,沒有對應(yīng)的Native組件。

別在list-item中用if

注意:請盡量不要在list-item里面用if來控制元素的顯示邏輯

因?yàn)?b>list組件原生端做了很多優(yōu)化,為了提升長列表的性能,type相同的list-item會被復(fù)用,也就是說內(nèi)存中駐留的list-item是有限的,不會隨著列表數(shù)據(jù)增多而變得占用太多內(nèi)存,這本來是一個(gè)非常棒的事情,讓開發(fā)者不用考慮一個(gè)列表中數(shù)據(jù)太大導(dǎo)致拖慢整個(gè)應(yīng)用速度的問題,也不用考慮沒顯示出來的list-item的懶加載,因?yàn)樵税堰@些工作都做了,所以list組件是個(gè)非常強(qiáng)大的組件。

但是,成也蕭何敗蕭何,由于list-item相同的會被復(fù)用,所以一旦你在list-item中用了if來控制元素的顯示邏輯,由于if的控制會導(dǎo)致結(jié)構(gòu)的變化,所以會出現(xiàn)相同list-item中有不同的結(jié)構(gòu)的情況,那么問題來了,當(dāng)原生端要復(fù)用的時(shí)候,結(jié)構(gòu)并不相同,于是就會導(dǎo)致報(bào)錯(cuò),嚴(yán)重的時(shí)候甚至?xí)霈F(xiàn)應(yīng)用閃退。目前快應(yīng)用的報(bào)錯(cuò)機(jī)制對前端開發(fā)者不太友好,這種錯(cuò)誤往往會讓你看的一臉懵逼。比如下面這種:

代碼


    
        
            content{{$item}}
            
        
    

報(bào)錯(cuò)截圖

那么我們怎么來實(shí)現(xiàn)list-item內(nèi)部控制元素的顯示呢,答案是用show屬性,因?yàn)?b>show屬性不改變元素結(jié)構(gòu),只顯示隱藏元素。

用list模擬scrollview

快應(yīng)用中沒有scrollview組件,所以很多需要滾動的場景就需要用list組件來模擬,垂直滾動的實(shí)現(xiàn)很簡單,因?yàn)?b>list默認(rèn)就是垂直滾動的,只要設(shè)置高度就好了,這里就不再贅述,主要講一下水平滾動的實(shí)現(xiàn)。

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

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

此外list還支持一個(gè)columns屬性,這個(gè)屬性可以幫助我們快速實(shí)現(xiàn)瀑布流的布局,當(dāng)然這些文檔中都有提到。建議大家把文檔中l(wèi)ist教程看一下,會對list的使用有更深的體會。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/99565.html

相關(guān)文章

  • 談?wù)凷pring-Data那些事兒

    摘要:什么是呢全稱,是提出的一個(gè)對象持久化規(guī)范,各應(yīng)用服務(wù)器自主選擇具體實(shí)現(xiàn)。僅僅只是一個(gè)規(guī)范,而不是產(chǎn)品使用本身是不能做到持久化的。只要提供了持久化類與表的映射關(guān)系,框架在運(yùn)行時(shí)就能參照映射文件的信息,把對象持久化到數(shù)據(jù)庫中。 我們在進(jìn)行事務(wù)處理往往需要和數(shù)據(jù)庫進(jìn)行交互,這其中有關(guān)系型數(shù)據(jù)庫(MySql,Sql Server,Oracle)或者是非關(guān)系型數(shù)據(jù)庫(Redis,Hadhoop)...

    chinafgj 評論0 收藏0
  • 談?wù)凷pring-Data那些事兒

    摘要:什么是呢全稱,是提出的一個(gè)對象持久化規(guī)范,各應(yīng)用服務(wù)器自主選擇具體實(shí)現(xiàn)。僅僅只是一個(gè)規(guī)范,而不是產(chǎn)品使用本身是不能做到持久化的。只要提供了持久化類與表的映射關(guān)系,框架在運(yùn)行時(shí)就能參照映射文件的信息,把對象持久化到數(shù)據(jù)庫中。 我們在進(jìn)行事務(wù)處理往往需要和數(shù)據(jù)庫進(jìn)行交互,這其中有關(guān)系型數(shù)據(jù)庫(MySql,Sql Server,Oracle)或者是非關(guān)系型數(shù)據(jù)庫(Redis,Hadhoop)...

    charles_paul 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<