微信小程序之骨架屏
發(fā)布時間：2021-06-29 09:05 所屬欄目：小程序開發(fā)教程
骨架屏可以理解為是當數(shù)據(jù)還未加載進來前，頁面的一個空白版本，一個簡單的關(guān)鍵渲染路徑?？梢钥吹皆陧撁嫱耆秩就瓿芍?，用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然后骨架屏中各個占位部分被實際資源完全替換，這個過程中用戶會覺得內(nèi)容正在逐漸加載即將呈現(xiàn)，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢，如下圖：
微信小程序骨架屏主要分為兩種方案，下面來說說這兩種方案。
1、為每個需要使用骨架屏的頁面定制一套靜態(tài)頁面。
這種方法缺點很明顯，需要為每個頁面單獨定制，布局如果修改則需要同時修改兩個頁面，增加了維護成本。但這種特別適用于長列表，只需要做用戶可見的部分，可在一定程度上增加響應(yīng)速度。
2、利用工具渲染頁面
獲取指定的DOM節(jié)點和對應(yīng)樣式，生成灰色塊覆蓋在原來的樣式結(jié)構(gòu)上，從而實現(xiàn)骨架屏。這種方式簡單易用好維護，個人感覺不太適合在長列表頁面。https://github.com/jayZOU/skeleton 這款骨架屏組件輕量、方便、快捷，里面有教程，強烈推薦。
以下使用第二種方法制作微信小程序骨架屏
安裝組件：
npm install --save miniprogram-skeleton |
引入skeleton自定義組件
{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton"
}
}
|
小程序中npm的配置及使用：
- 在微信開發(fā)者工具中，設(shè)置 —> 項目設(shè)置—> 勾選使用npm模塊。
- 在微信開發(fā)者工具中，工具 —> 構(gòu)建npm，構(gòu)建完成會生成 miniprogram_npm 文件夾，項目用到的npm包都在這里。
- 按照頁面的使用路徑，從 miniprogram_npm 引入需要的包。
使用骨架屏組件
1.在wxml頁面需要用到的地方使用，如下：
<!--引入骨架屏模版 -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>
<!--index.wxml-->
<!--給頁面根節(jié)點class添加skeleton, 用于獲取當前頁面尺寸，沒有的話就默認使用屏幕尺寸-->
<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頁面需要用到的地方使用，如下：
//index.js
//初始化默認的數(shù)據(jù)，用于撐開頁面結(jié)構(gòu)，讓骨架屏可以獲取到整體的頁面結(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)
}
})
|
