微信小程序之骨架屏
骨架屏可以理解為是當(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 |
引入skeleton自定義組件
{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton"
}
}
|
小程序中npm的配置及使用：
- 在微信開(kāi)發(fā)者工具中，設(shè)置 —> 項(xiàng)目設(shè)置—> 勾選使用npm模塊。
- 在微信開(kāi)發(fā)者工具中，工具 —> 構(gòu)建npm，構(gòu)建完成會(huì)生成 miniprogram_npm 文件夾，項(xiàng)目用到的npm包都在這里。
- 按照頁(yè)面的使用路徑，從 miniprogram_npm 引入需要的包。
使用骨架屏組件
1.在wxml頁(yè)面需要用到的地方使用，如下：
<!--引入骨架屏模版 -->
<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>
|
2.在js頁(yè)面需要用到的地方使用，如下：
//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)
}
})
|
