更優(yōu)雅的微信小程序骨架屏實現(xiàn)詳解

更新時間：2019年08月07日 11:30:38 作者：js_hcl

這篇文章主要介紹了更優(yōu)雅的微信小程序骨架屏實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

一、演示

二、說明：

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

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

具體實現(xiàn)：

頁面準備一份默認數(shù)據(jù)：defaultData

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

頁面onload時，data=defaultData

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

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

優(yōu)點：

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

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

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

4.可定制：

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

注意事項：

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

2、custom-class：寬高不需要傳，默認數(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,//第一次顯示骨架屏，之后就顯示真實節(jié)點。
  success:false //不可逆，只能false->true
 }
})

<!--components/skeleton/skeleton.wxml-->
<!-- 這里是真實渲染 -->
<view wx:if="{{success}}" >
  <slot />
</view>

<!-- 這里是骨架屏：有動畫情況 -->
 <transition 
  wx:elif="{{transition}}"
  show="{{true}}"
  name="{{ transition }}"
  duration="{{800}}"
  custom-class="skeleton custom-class"
 >
  <view style="opacity:0;">
    <slot />
  </view>
</transition>

<!-- 這里是骨架屏:無動畫情況 -->
<view wx:else class="skeleton custom-class">
  <view style="opacity:0;">
    <slot />
  </view>
</view>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: