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

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

一般具體的做法是這樣：

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

生成骨架屏的方法：

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

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

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

 效果如下：

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

 在使用骨架屏時有三點需要注意：

• 第一點在data數(shù)據(jù)對象中默認設置loading等于true；
• 第二點就是不要直接修改生成的骨架屏的一個代碼；
• 第三點就是不要過度去使用骨架屏：一般只給主頁去添加骨架屏效果，因為骨架屏是小程序提供的一種優(yōu)化用戶體驗的一個機制，但其實任何的一個渲染都有消耗，骨架屏也是。

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

最新評論