一、什么是骨架屏？

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

二、為什么要用骨架屏

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

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

三、骨架屏效果

未加載完成數據后，展示空白灰色盒子，加載成功后才展示內容

四、實現(xiàn)方法

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

?

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

?在index.wxss里面調用骨架屏樣式

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

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

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。