骨架屏是為了展示一個頁面骨架而不含有實(shí)際的頁面內(nèi)容，從渲染效率上來講，骨架屏它并不能使首屏渲染加快。由于骨架屏的一些使用又向用戶渲染了額外的一些內(nèi)容，這些內(nèi)容是額外添加的、本來是不需要渲染的，它反而從整體上加長了首屏渲染的一個時長。

為了避免白屏現(xiàn)象的一個出現(xiàn)，可以這樣優(yōu)化：開發(fā)者可以在這個數(shù)據(jù)完成加載之前使用骨架屏和Loading提示，在這個數(shù)據(jù)完成之后將骨架屏和Loading做不渲染的一個處理，再展示真正的一個頁面內(nèi)容。

一般具體的做法是這樣：

• 在數(shù)據(jù)源對象中設(shè)定一個loading提示變量值并將初始值設(shè)置為true；
• 數(shù)據(jù)加載完成以后再將loading變量通過setData方法設(shè)置為false；
• 在WXML這個頁面里面通過loading變量切換骨架屏內(nèi)容以及Loading提示還有真正頁面內(nèi)容的一個顯示。

生成骨架屏的方法：

1、點(diǎn)擊生成骨架屏，小程序會自動生成兩個文件（骨架屏）；

 2、按照文件提示，京創(chuàng)建好的文件引入對應(yīng)文件中；

 3、在接口調(diào)用完成之后將loading設(shè)置為false，使骨架屏不顯示；

 效果如下：

 補(bǔ)充：有時候可能會出現(xiàn)實(shí)際的頁面和骨架屏發(fā)生重影的現(xiàn)象，可以在實(shí)際頁面的view標(biāo)簽上加一個wx:else的條件，使骨架屏和世界頁面不會同時出現(xiàn)。

 在使用骨架屏?xí)r有三點(diǎn)需要注意：

• 第一點(diǎn)在data數(shù)據(jù)對象中默認(rèn)設(shè)置loading等于true；
• 第二點(diǎn)就是不要直接修改生成的骨架屏的一個代碼；
• 第三點(diǎn)就是不要過度去使用骨架屏：一般只給主頁去添加骨架屏效果，因?yàn)楣羌芷潦切〕绦蛱峁┑囊环N優(yōu)化用戶體驗(yàn)的一個機(jī)制，但其實(shí)任何的一個渲染都有消耗，骨架屏也是。

到此這篇關(guān)于微信小程序骨架屏的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)小程序骨架屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論