微信小程序骨架屏的實(shí)現(xiàn)方法
骨架屏是為了展示一個(gè)頁(yè)面骨架而不含有實(shí)際的頁(yè)面內(nèi)容，從渲染效率上來(lái)講，骨架屏它并不能使首屏渲染加快。由于骨架屏的一些使用又向用戶渲染了額外的一些內(nèi)容，這些內(nèi)容是額外添加的、本來(lái)是不需要渲染的，它反而從整體上加長(zhǎng)了首屏渲染的一個(gè)時(shí)長(zhǎng)。
為了避免白屏現(xiàn)象的一個(gè)出現(xiàn)，可以這樣優(yōu)化：開(kāi)發(fā)者可以在這個(gè)數(shù)據(jù)完成加載之前使用骨架屏和Loading提示，在這個(gè)數(shù)據(jù)完成之后將骨架屏和Loading做不渲染的一個(gè)處理，再展示真正的一個(gè)頁(yè)面內(nèi)容。
一般具體的做法是這樣：
- 在數(shù)據(jù)源對(duì)象中設(shè)定一個(gè)loading提示變量值并將初始值設(shè)置為true；
- 數(shù)據(jù)加載完成以后再將loading變量通過(guò)setData方法設(shè)置為false；
- 在WXML這個(gè)頁(yè)面里面通過(guò)loading變量切換骨架屏內(nèi)容以及Loading提示還有真正頁(yè)面內(nèi)容的一個(gè)顯示。
生成骨架屏的方法：
1、點(diǎn)擊生成骨架屏，小程序會(huì)自動(dòng)生成兩個(gè)文件（骨架屏）；
2、按照文件提示，京創(chuàng)建好的文件引入對(duì)應(yīng)文件中；
3、在接口調(diào)用完成之后將loading設(shè)置為false，使骨架屏不顯示；
效果如下：
補(bǔ)充：有時(shí)候可能會(huì)出現(xiàn)實(shí)際的頁(yè)面和骨架屏發(fā)生重影的現(xiàn)象，可以在實(shí)際頁(yè)面的view標(biāo)簽上加一個(gè)wx:else的條件，使骨架屏和世界頁(yè)面不會(huì)同時(shí)出現(xiàn)。
在使用骨架屏?xí)r有三點(diǎn)需要注意：
- 第一點(diǎn)在data數(shù)據(jù)對(duì)象中默認(rèn)設(shè)置loading等于true；
- 第二點(diǎn)就是不要直接修改生成的骨架屏的一個(gè)代碼；
- 第三點(diǎn)就是不要過(guò)度去使用骨架屏：一般只給主頁(yè)去添加骨架屏效果，因?yàn)楣羌芷潦切〕绦蛱峁┑囊环N優(yōu)化用戶體驗(yàn)的一個(gè)機(jī)制，但其實(shí)任何的一個(gè)渲染都有消耗，骨架屏也是。
到此這篇關(guān)于微信小程序骨架屏的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)小程序骨架屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了UNiapp 微信小程序漸變不生效的解決方案,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
d3.js實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)絡(luò)拓?fù)鋱D實(shí)例代碼
最近一直在學(xué)習(xí)d3.js，大家都知道d3.js是一個(gè)非常不錯(cuò)的數(shù)據(jù)可視化庫(kù)，我們可以用它來(lái)做一些比較酷的東西，比如可以來(lái)顯示一些簡(jiǎn)單的網(wǎng)絡(luò)拓?fù)鋱D，這篇文中就通過(guò)實(shí)例代碼給大家介紹了如何利用d3.js實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)絡(luò)拓?fù)鋱D，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-11-11
抽空寫(xiě)了個(gè)類似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個(gè)輕量級(jí)原生小插件吧，但還是分享出來(lái)，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。2010-10-10
本篇文章給大家分享了作者在學(xué)習(xí)JavaScript異步加載中遇到的問(wèn)題，總結(jié)后給出了詳細(xì)的處理方案，有興趣的朋友可以學(xué)習(xí)下。2018-02-02
JavaScript面向?qū)ο蟮膶?shí)現(xiàn)方法小結(jié)
這篇文章主要介紹了JavaScript面向?qū)ο蟮膶?shí)現(xiàn)方法,實(shí)例總結(jié)了兩種常見(jiàn)的面向?qū)ο蟮膶?shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
想要取得iframe中的元素和js變量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法2014-06-06
JavaScript的數(shù)據(jù)類型是非常弱的（不然不會(huì)叫它做弱類型語(yǔ)言了）！在使用算術(shù)運(yùn)算符時(shí)，運(yùn)算符兩邊的數(shù)據(jù)類型可以是任意的，比如，一個(gè)字符串可以和數(shù)字相加2016-03-03
JS模仿MSN右下角彈出提示框代碼，需要的朋友可以參考下。2010-09-09
詳解javascript獲取url信息的常見(jiàn)方法
本篇文章主要對(duì)javascript獲取url信息的常見(jiàn)方法進(jìn)行介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
JavaScript使用FileSystemObject對(duì)象寫(xiě)入文本文件內(nèi)容的方法
這篇文章主要介紹了JavaScript使用FileSystemObject對(duì)象寫(xiě)入文本文件內(nèi)容的方法,實(shí)例分析了javascript使用ActiveXObject的技巧與常見(jiàn)問(wèn)題的解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08