骨架屏可以理解為是當(dāng)數(shù)據(jù)還未加載進(jìn)來(lái)前,頁(yè)面的一個(gè)空白版本,一個(gè)簡(jiǎn)單的關(guān)鍵渲染路徑??梢钥吹皆陧?yè)面完全渲染完成之前,用戶會(huì)看到一個(gè)樣式簡(jiǎn)單,描繪了當(dāng)前頁(yè)面的大致框架的骨架屏頁(yè)面,然后骨架屏中各個(gè)占位部分被實(shí)際資源完全替換,這個(gè)過(guò)程中用戶會(huì)覺(jué)得內(nèi)容正在逐漸加載即將呈現(xiàn),降低了用戶的焦躁情緒,使得加載過(guò)程主觀上變得流暢,如下圖:
微信小程序骨架屏主要分為兩種方案,下面來(lái)說(shuō)說(shuō)這兩種方案。
1、為每個(gè)需要使用骨架屏的頁(yè)面定制一套靜態(tài)頁(yè)面。
這種方法缺點(diǎn)很明顯,需要為每個(gè)頁(yè)面單獨(dú)定制,布局如果修改則需要同時(shí)修改兩個(gè)頁(yè)面,增加了維護(hù)成本。但這種特別適用于長(zhǎng)列表,只需要做用戶可見(jiàn)的部分,可在一定程度上增加響應(yīng)速度。
2、利用工具渲染頁(yè)面
獲取指定的DOM節(jié)點(diǎn)和對(duì)應(yīng)樣式,生成灰色塊覆蓋在原來(lái)的樣式結(jié)構(gòu)上,從而實(shí)現(xiàn)骨架屏。這種方式簡(jiǎn)單易用好維護(hù),個(gè)人感覺(jué)不太適合在長(zhǎng)列表頁(yè)面。https://github.com/jayZOU/skeleton 這款骨架屏組件輕量、方便、快捷,里面有教程,強(qiáng)烈推薦。
以下使用第二種方法制作微信小程序骨架屏
npm install --save miniprogram-skeleton |
{ "usingComponents": { "skeleton": "../miniprogram_npm/miniprogram-skeleton" } } |
小程序中npm的配置及使用:
<!--引入骨架屏模版 --> <skeleton wx:if="{{showSkeleton}}"></skeleton> <!--index.wxml--> <!--給頁(yè)面根節(jié)點(diǎn)class添加skeleton, 用于獲取當(dāng)前頁(yè)面尺寸,沒(méi)有的話就默認(rèn)使用屏幕尺寸--> <view class="container skeleton"> <view class="userinfo"> <block> <!--skeleton-radius 繪制圓形--> <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}" mode="cover"></image> <!--skeleton-rect 繪制矩形--> <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text> </block> </view> <view style="margin: 20px 0"> <view wx:for="{{lists}}" class="lists"> <icon type="success" size="20" class="list skeleton-radius"/> <text class="skeleton-rect">{{item}}</text> </view> </view> <view class="usermotto"> <text class="user-motto skeleton-rect">{{motto}}</text> </view> <view style="margin-top: 200px;"> aaaaaaaaaaa </view> </view> |
//index.js //初始化默認(rèn)的數(shù)據(jù),用于撐開(kāi)頁(yè)面結(jié)構(gòu),讓骨架屏可以獲取到整體的頁(yè)面結(jié)構(gòu) Page({ data: { motto: 'Hello World', userInfo: { avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132', nickName: 'jayzou' }, lists: [ 'aslkdnoakjbsnfkajbfk', 'qwrwfhbfdvndgndghndeghsdfh', 'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh', ], showSkeleton: true //骨架屏顯示隱藏 }, onLoad: function () { const that = this; setTimeout(() => { //3S后隱藏骨架屏 that.setData({ showSkeleton: false }) }, 3000) } }) |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)