骨架屏是頁面的一個(gè)空白版本，通常會(huì)在頁面完全渲染之前，通過一些灰色的區(qū)塊大致勾勒出輪廓，待數(shù)據(jù)加載完成后，再替換成真實(shí)的內(nèi)容。
參考效果
骨架屏作用是緩解用戶等待時(shí)的焦慮情緒，屬于用戶體驗(yàn)優(yōu)化方案。
生成骨架屏
微信開發(fā)者工具提供了自動(dòng)生成骨架屏代碼的能力。文章來源：http://www.zghlxwxcb.cn/news/detail-812157.html
使用時(shí)需要把自動(dòng)生成的 xxx.skeleton.vue 和 xxx.skeleton.wxss 封裝成 vue 組件。
1.點(diǎn)擊模擬器中的頁面信息/生成骨架屏，會(huì)生成兩個(gè)文件
2.生成xxx.skeleton.vue 和 xxx.skeleton.wxss 兩個(gè)文件
3.將這兩個(gè)文件封裝成一個(gè)vue組件
4.在組件中使用文章來源地址http://www.zghlxwxcb.cn/news/detail-812157.html
// 加載中標(biāo)記
let isLoading = ref(false)
// 頁面加載調(diào)用函數(shù)
onLoad(async () => {
isLoading.value=true
await Promise.all([getHomeBanner(), getCategoryPanel(), getHotPanel()])
isLoading.value=false
})
<template>
<scroll-view>
// <pageSkeleton /> 通過小程序生成的兩個(gè)文件封裝成的組件
<pageSkeleton v-if="isLoading" />
<template v-else>
<!-- 自定義輪播圖 -->
<XtxSwiper :bannerList="bannerList" />
<!-- 首頁分類 -->
<CategoryPanel :CategoryPanelList="CategoryPanelList" />
<!-- 熱門推薦 -->
<HotPanel :HotPanelList="HotPanelList" />
<!-- 猜你喜歡 -->
<XtxGuess ref="gussRef" />
</template>
</scroll-view>
</template>
到了這里，關(guān)于uni-app如何生成骨架屏的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
