如何在微信小程式中使用骨架屏的步驟
本文介紹了微信小程式中使用骨架屏，分享給大家，具體如下：
先上效果圖
骨架屏主要起到佔位作用，向用戶說明該區域有內容，有一定的心理準備。
聊聊背景：剛上線一款小程式，隨著上架的東西越來越多，微信小程式載入越來越慢，會出現一段時間的白屏（大概2-3s），這對使用者體驗上來講特別不友好。所以在網上開始找這方面的資料，骨架屏主要分為兩種方案，下面來說說這兩種方案。
1、為每個需要使用骨架屏的頁面定製一套靜態頁面。這種方法缺點很明顯，需要為每個頁面單獨定製，佈局如果修改則需要同時修改兩個頁面，增加了維護成本。但這種特別適用於長列表，只需要做使用者可見的部分，可在一定程度上增加響應速度。
2、利用工具渲染頁面 ， 獲取指定的DOM節點和對應樣式，生成灰色塊覆蓋在原來的樣式結構上，從而實現骨架屏。這種方式簡單易用好維護，個人感覺不太適合在長列表頁面。https://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) {
}
})
}總結一下：資料較多的頁面使用骨架屏可以大大提高使用者體驗。上文提到的骨架屏元件也是非常好用，幾分鐘就可以上手使用。
初次接觸骨架屏，有理解不到的地方還請多多指正。
到此這篇關於如何在微信小程式中使用骨架屏的步驟的文章就介紹到這了,更多相關小程式使用骨架屏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！