一、演示

二、說(shuō)明：

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

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

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

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

xml中：<skeleton watchData={{與卡槽笨蛋一樣的對(duì)象}}><slot/></skeleton>

頁(yè)面onload時(shí)，data=defaultData

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

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

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

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

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

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

4.可定制：

• 可以共存：文字，圖片/imageLoader，或其它的。低入侵
• 骨架屏不是一個(gè)完整的，而是items，且可以有不同的樣式或過(guò)渡
• 可以完美支持觸底加載時(shí)的骨架屏

注意事項(xiàng)：

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

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

三、代碼：

import { extendComponent} from '../../common/component';extendComponent({ properties: {  watchData: null,//觀(guān)察對(duì)應(yīng)的請(qǐng)求對(duì)象  transition:{//過(guò)渡名稱(chēng)，對(duì)應(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 }})

<!--components/skeleton/skeleton.wxml--><!-- 這里是真實(shí)渲染 --><view wx:if="{{success}}" >  <slot /></view><!-- 這里是骨架屏：有動(dòng)畫(huà)情況 --> <transition   wx:elif="{{transition}}"  show="{{true}}"  name="{{ transition }}"  duration="{{800}}"  custom-class="skeleton custom-class" >  <view style="opacity:0;">    <slot />  </view></transition><!-- 這里是骨架屏:無(wú)動(dòng)畫(huà)情況 --><view wx:else class="skeleton custom-class">  <view style="opacity:0;">    <slot />  </view></view>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。