一、什么是骨架屏？

骨架屏是頁面的一個空白版本，通常會在頁面完全渲染之前，通過一些灰色的區(qū)塊大致勾勒出輪廓，待數(shù)據(jù)加載完成后，再替換成真實(shí)的內(nèi)容。通常在小程序中，我們需要手工維護(hù)骨架屏的代碼，當(dāng)業(yè)務(wù)變更時，同樣需要對骨架屏代碼進(jìn)行調(diào)整。

二、為什么要用骨架屏

請求數(shù)據(jù)時都會出現(xiàn)一定的延遲，屏幕從而會出現(xiàn)一大片空白，以前對于這段等待時間的處理大多數(shù)都是采用菊花圖加載動畫或者類似于這種的加載動畫。

這種方式請求時頁面會卡住，直到請求完成，用戶期間無法進(jìn)行任何的操作，只能看著加載動效圖，給人一種死機(jī)的感覺，體驗(yàn)差。為了進(jìn)一步提升用戶的體驗(yàn)，于是就出現(xiàn)了另一種加載方式——骨架屏（ Skeleton Screen ）

三、骨架屏效果

未加載完成數(shù)據(jù)后，展示空白灰色盒子，加載成功后才展示內(nèi)容

四、實(shí)現(xiàn)方法

1、微信開發(fā)者工具可以為當(dāng)前頁面生成骨架屏，工具入口位于模擬器面板右下角三點(diǎn)處。生成之后會多出兩個文件。index.skeleton.wxml里面有使用步驟

?

?2、引用文件，在index.wxml引用骨架屏，通過skeleton_loading來控制顯示/隱藏

?在index.wxss里面調(diào)用骨架屏樣式

?在index.js里面data將skeleton_loading變?yōu)閒alse，等數(shù)據(jù)請求成功后，將其變?yōu)閠rue即可。

注：1、當(dāng)頁面布局改變之后，骨架屏也要重新成功

? ? ? ? 2、生成骨架屏后，出現(xiàn)有些圖片一樣會展示，可以修改index.wxml或index.js將靜態(tài)資源動態(tài)和請求成功后同步獲取。切記不要直接更改生成骨架屏文件，除非你只想要一次性，不然后續(xù)更改很麻煩。

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序---骨架屏实现，实现起来超级简单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。