這篇文章主要講解了“微信小程序怎么實(shí)現(xiàn)骨架屏”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)骨架屏”吧！

創(chuàng)新互聯(lián)專注于印江企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)。印江網(wǎng)站建設(shè)公司,為印江等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

一、演示

二、說明：

實(shí)現(xiàn)思路：需要默認(rèn)數(shù)據(jù)，這樣才能完美應(yīng)對list,wx:if的情況，及flex寬度靠內(nèi)容撐開的樣式。

替換思路：和imageLoader加載器類似：先展示默認(rèn)圖片，拿到數(shù)據(jù)之后顯示真實(shí)的圖片

具體實(shí)現(xiàn)：

頁面準(zhǔn)備一份默認(rèn)數(shù)據(jù)：defaultData

xml中：

頁面onload時，data=defaultData

此時：watchData第一次收到數(shù)據(jù)(第一次為onload時)，靠默認(rèn)數(shù)據(jù)，撐開卡槽容器，自身opacity:0;

此后，再收到數(shù)據(jù)就關(guān)閉骨架屏

優(yōu)點(diǎn)：

1.好維護(hù)：頁面沒有額外的xml。也沒有額外的css。只需要維護(hù)一份默認(rèn)數(shù)據(jù)即可。

2.更優(yōu)雅，更真實(shí)：多個請求，會看到分批次的替換。而不需要全請求成功才替換。

3.可以和imageLoader共處，而不會出現(xiàn)和美團(tuán)等骨架屏沒有之后，圖片區(qū)域還出現(xiàn)短暫空白

4.可定制：

• 可以共存：文字，圖片/imageLoader，或其它的。低入侵

• 骨架屏不是一個完整的，而是items，且可以有不同的樣式或過渡

• 可以完美支持觸底加載時的骨架屏

注意事項(xiàng)：

1、custom-class：需要傳與卡槽一樣的[border-radius]；可選[背景色]，或者其它

2、custom-class：寬高不需要傳，默認(rèn)數(shù)據(jù)就是撐開寬高的

三、代碼：

import {
 extendComponent
} from '../../common/component';
extendComponent({
 properties: {
  watchData: null,//觀察對應(yīng)的請求對象
  transition:{//過渡名稱，對應(yīng)該組件的name
   type:String,
   value:null
  }
 },
 observers: {
  "watchData":function(newVal){
   this.data.counter+=1;
   if(this.data.counter>=2){
    this.setData({success:true});
   }
  }
 },
 data: {
  counter:0,//第一次顯示骨架屏，之后就顯示真實(shí)節(jié)點(diǎn)。
  success:false //不可逆，只能false->true
 }
})

感謝各位的閱讀，以上就是“微信小程序怎么實(shí)現(xiàn)骨架屏”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對微信小程序怎么實(shí)現(xiàn)骨架屏這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！