鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
頁面加載時(shí)的優(yōu)化方式
有些時(shí)候在我們的頁面中有大量數(shù)據(jù)或者圖片加載,如果不做任何處理,整個(gè)進(jìn)入加載的用戶體驗(yàn)會(huì)很差很難看
目前大部分有兩種方式優(yōu)化增加用戶體驗(yàn)
第一種為增加菊花加載或其它樣式的加載按鈕,在數(shù)據(jù)加載完成后隱藏
第二種就是骨架屏形式,現(xiàn)在小程序已經(jīng)支持快速生成骨架屏,用起來相當(dāng)方便.
什么是骨架屏
骨架屏 Skeleton Screen Loading 也叫加載占位圖酥夭，是近年流行的加載控件芹血，通常表現(xiàn)形式是在界面上待加載區(qū)域填充灰色的占位圖，與線框圖的效果非常相似移迫。Skeleton Screen本質(zhì)上是界面加載過程中的過渡效果。
骨架屏的應(yīng)用場(chǎng)景
適用于布局排版固定的內(nèi)容區(qū)域
骨架屏所展現(xiàn)的是內(nèi)容的大概輪廓管行，如果內(nèi)容布局和排版不是固定的厨埋，那么輪廓和內(nèi)容布局的巨大差異，不僅不能給用戶順暢和期待感捐顷，反倒會(huì)造成落差荡陷。
因此骨架屏適用于布局排版固定的內(nèi)容區(qū)域，例如列表迅涮、文章废赞、個(gè)人信息。
注意：如果內(nèi)容區(qū)域有空頁面的情況叮姑，也不建議使用骨架屏唉地。
微信小程序中使用骨架屏
生成骨架屏
首先進(jìn)入我們需要生成骨架屏的頁面,然后在我們開發(fā)者工具中點(diǎn)擊生成骨架屏
在頁面目錄生成list.skeleton.wxml 、list.skeleton.wxss在list.wxss中引入
@import "./list.skeleton.wxss";
- 在list.wxml中加入代碼
<import src="list.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
- 把list.wxml原有代碼包裹在<block>中
<block wx:else>
原有頁面代碼
</block>
- 在list.js中控制loading
Page({
data: {
loading: true
},
onReady(){
setTimeout(()=>{
this.setData({
loading: false
})
},3000)
}
}
