# SmallProgramEmptyLayoutDemo
程式必用的空佈局（包含載入中、載入為空、載入錯誤、自己的佈局）。完全不影響其他邏輯
git地址：點選開啟連結

介紹

  空佈局， 包含記載中、載入為空、載入錯誤。 自己還是和原來那樣開發小程式那樣， 只是在你要使用空佈局的根佈局使用empty-layout標籤替換view標籤即可。該空佈局不會影響到你開發自己功能的邏輯。（你要說是非侵入的也行，好像這樣說更高大上哈）
  詳情及用法可檢視Demo

注意

  空佈局中的各個介面狀態的圖片、介面或者圖片，使用者可以根據自己的去empty中去改
  有什麼問題可直接聯絡我QQ:745759231
  

效果

1.載入中

2.載入失敗

3.載入資料為空

使用方法

1.引入

  把Demo中的empty資料夾複製到自己專案裡

2.使用

  在要使用的介面的json檔案中引入空佈局

"usingComponents": {
   "empty-layout": "../../empty/empty"
}

  在要使用的介面的js檔案中引入空佈局的js檔案

  var Empty = require("../../empty/constant/EmptyConstant.js");

  在要使用的介面中那一塊要使用空佈局直接使用空佈局提供的標籤即可

<empty-layout bindemptyevent="emptyCallback" emptyType="{{emptyType}}" loadingTransparent="{{false}}">
  <!--自己的佈局-->
  <view>
  </view>
</empty-layout>
 

3.展示不同的介面

3.1. 佈局中三個值的意義

bindemptyevent="emptyCallback"中emptyCallback為空佈局中點選重新載入的回撥（emptyType: 表示是哪個佈局的重新載入。 Empty.error: 點選了錯誤佈局中的重新載入、 Empty.empty: 點選了資料為空佈局中的重新載入）
emptyType="{{emptyType}}"中emptyType指定展示哪個佈局（Empty.content: 展示自己的佈局、Empty.empty: 展示資料為空的佈局、 Empty.error: 展示錯誤的佈局、 Empty.loading: 展示載入中的佈局）
loadingTransparent="{{false}}"中的值是指定在載入中是是否顯示後面自己的佈局
 

3.2.改變佈局

  在自己程式碼中js邏輯中去根據自己的邏輯去設定emptyType的值即可，eg: 要展示載入中的佈局

this.setData({
   emptyType: Empty.loading
});