微信小程序骨架屏的實(shí)現(xiàn)示例
為了優(yōu)化用戶體驗(yàn),骨架屏一直是開發(fā)者比較喜歡的表現(xiàn)方式,也就是首屏占位的一種表現(xiàn)方式,不會(huì)讓瀏覽者因?yàn)殚L時(shí)間的等待而焦躁。小程序中骨架屏的實(shí)現(xiàn)還是比較簡單的,但是沒用過的同學(xué)難免會(huì)誤入歧途,今天就分享一下小程序中骨架屏的實(shí)現(xiàn)。
什么是骨架屏
骨架屏是頁面的一個(gè)空白版本,通常會(huì)在頁面完全渲染之前,通過一些灰色的區(qū)塊大致勾勒出輪廓,待數(shù)據(jù)加載完成后,再替換成真實(shí)的內(nèi)容。通常在小程序中,我們需要手工維護(hù)骨架屏的代碼,當(dāng)業(yè)務(wù)變更時(shí),同樣需要對(duì)骨架屏代碼進(jìn)行調(diào)整。為了開發(fā)的便利,開發(fā)者工具提供了自動(dòng)生成骨架屏代碼的能力。
小程序中骨架屏的生成方式
微信開發(fā)者工具可以為當(dāng)前頁面生成骨架屏,工具入口位于模擬器面板右下角三點(diǎn)處。
引入方法
骨架屏代碼通過小程序模板(template)的方式引入 以 pages/index/index 頁面為例,引入方式如下。
<!-- pages/index/index.wxml 引入模板 --> <import src="index.skeleton.wxml"/> <template is="skeleton" wx:if="{{loading}}" data="{{}}"/>
/* pages/index/index.wxss 中引入樣式 */ @import "index.skeleton.wxss";
顯示與隱藏
與普通的模板相同,通過 wx:if 控制顯示隱藏。
可以設(shè)置延遲加載,或者在頁面所有數(shù)據(jù)請(qǐng)求成功之后隱藏骨架屏。
延遲加載的代碼放在 onLoad 生命周期中,代碼如下:
// 漸進(jìn)式加載數(shù)據(jù),逐步隱藏 loading progressiveLoad() { setTimeout(() => { this.setData({ loading: false }) }, 1000) }, onLoad() { this.progressiveLoad() // 漸進(jìn)式加載數(shù)據(jù),逐步隱藏 loading }
開發(fā)者還可以根據(jù)需要設(shè)置文字、圖片、按鈕的顏色和形狀,同時(shí)可根據(jù) excludes、remove、hide等忽視或隱藏部分頁面元素,以獲取更優(yōu)的展示效果。具體配置見骨架屏官方文檔
到此這篇關(guān)于微信小程序骨架屏的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序骨架屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) 的相關(guān)資料,還給大家介紹了在Bootstrap框架中提供的機(jī)制驗(yàn)證效果,非常不錯(cuò),需要的朋友可以參考下2016-08-08JS簡單實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JS簡單實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組遍歷、判斷實(shí)現(xiàn)去重復(fù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-10-10JS實(shí)現(xiàn)的文字與圖片定時(shí)切換效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的文字與圖片定時(shí)切換效果代碼,可實(shí)現(xiàn)定時(shí)切換及鼠標(biāo)點(diǎn)擊切換兩種效果,涉及JavaScript鼠標(biāo)事件控制頁面樣式的相關(guān)技巧,需要的朋友可以參考下2015-10-10js實(shí)現(xiàn)的在本地預(yù)覽圖片功能示例
這篇文章主要介紹了js實(shí)現(xiàn)的在本地預(yù)覽圖片功能,結(jié)合實(shí)例形式分析了JavaScript兼容移動(dòng)web與IE瀏覽器的圖片預(yù)覽功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11js通過更改按鈕的顯示樣式實(shí)現(xiàn)按鈕的滑動(dòng)效果
使用js實(shí)現(xiàn)按鈕的滑動(dòng)效果,通過更改按鈕的顯示樣式,來實(shí)現(xiàn)按鈕動(dòng)態(tài)滑動(dòng),需要的朋友可以參考下2014-04-04JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了JS滑動(dòng)拼圖驗(yàn)證相關(guān)原理、實(shí)現(xiàn)步驟與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當(dāng)前行數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當(dāng)前行數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09js中document.getElementByid、document.all和document.layers區(qū)分介紹
document.getElementById 是公共標(biāo)準(zhǔn),被目前的所有主流瀏覽器支持,document.all只有IE支持,document.layers是Netscape 4.x專有的屬性2011-12-12