如何在微信小程序中使用骨架屏
先上效果圖
骨架屏主要起到佔位作用，向用戶說明該區域有內容，有一定的心理準備。
聊聊背景：剛上線一款小程序，隨着上架的東西越來越多，微信小程序加載越來越慢，會出現一段時間的白屏（大概2-3s），這對用戶體驗上來講特別不友好。所以在網上開始找這方面的資料，骨架屏主要分為兩種方案，下面來說說這兩種方案。
1、為每個需要使用骨架屏的頁面定製一套靜態頁面。這種方法缺點很明顯，需要為每個頁面單獨定製，布局如果修改則需要同時修改兩個頁面，增加了維護成本。但這種特別適用於長列表，只需要做用戶可見的部分，可在一定程度上增加響應速度。
2、利用工具渲染頁面，獲取指定的DOM節點和對應樣式，生成灰色塊覆蓋在原來的樣式結構上，從而實現骨架屏。這種方式簡單易用好維護，個人感覺不太適合在長列表頁面。//github.com/jayZOU/skeleton 這款骨架屏組件輕量、方便、快捷，裏面有教程，強烈推薦。
使用哪一種方案，就要根據自己的項目情況來進行選擇了。我採用的是第一種，因為這個頁面加載的DOM節點太多了。從獲取到數據後到渲染到頁面這段時間有骨架屏做緩衝，效果倍棒。
實現方法：
1、根據原有頁面的結構，在重寫一個靜態頁面，把原來用來顯示圖片、文字的地方替換成有灰色背景色的塊。
<!--骨架屏 -->
<view class="sort" wx:if="{{showSkeleton}}">
<scroll-view scroll-y="true" class="sortlist" style="height:{{contentHeight-170}}rpx">
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
</scroll-view>
</view >
<view class="sort" wx:else>
這裡是原來的頁面
</view >2、使用一個變量來控制骨架屏的顯示或隱藏。
onLoad: function(options) {
var that = this
wx.request({
url:'xxxx', //請求地址
data: { //發送給後台的數據
xxxx: xxxx
},
header: { //請求頭
"Content-Type": "applciation/json"
},
method: "GET",
success: function(res) {
that.setData({
goodslist: data
})
that.setData({
// 數據渲染後
showSkeleton: false
})
},
fail: function(err) {
}
})
}總結一下：數據較多的頁面使用骨架屏可以大大提高用戶體驗。上文提到的骨架屏組件也是非常好用，幾分鐘就可以上手使用。
初次接觸骨架屏，有理解不到的地方還請多多指正。
