add

zzjian · Apr 13, 2018 · 6b627b2 · 6b627b2
1 parent 36610fc
commit 6b627b2
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 28 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,5 @@ node_modules
 npm-debug.log
 jsconfig.json
 project.config.json
+.vscode/
+typings/
diff --git a/components/statusLayout/statusLayout.js b/components/statusLayout/statusLayout.js
@@ -4,6 +4,18 @@ Component({
    * 组件的属性列表
    */
   properties: {
+    rootStyle: {
+      type: String,
+      value:''
+    },
+    rootHeight:{
+      type: Number,
+      value: -1
+    },
+    rootWidth: {
+      type: Number,
+      value: -1
+    },
     status: {
       type: String,
       value: 'CONTENT',  //LOADING、CONTENT、EMPTY、ERROR
@@ -79,39 +91,56 @@ Component({
    */
   methods: {
     setStatus: function(status) {
-      var anim = ''
       switch(status) {
         case 'LOADING':
-          this.data.statusText = this.properties.loadingText
-          this.data.statusImage = this.properties.loadingImage
-          this.data.imgWidth = this.properties.loadingImageWidth
-          this.data.imgHeight = this.properties.loadingImageHeight
+          this.showLoading()
           break
         case 'EMPTY':
-          this.data.statusText = this.properties.emptyText
-          this.data.statusImage = this.properties.emptyImage
-          this.data.imgWidth = this.properties.emptyImageWidth
-          this.data.imgHeight = this.properties.emptyImageHeight
+          this.showEmpty()
           break
         case 'ERROR':
-          this.data.statusText = this.properties.errorText
-          this.data.statusImage = this.properties.errorImage
-          this.data.imgWidth = this.properties.errorImageWidth
-          this.data.imgHeight = this.properties.errorImageHeight
+          this.showError()
           break
         case 'CONTENT':
+          this.showContent()
           break
         default:
           console.log("error: 未找到该status")
           break
       }
+    },
+    showLoading: function(){
       this.setData({
-        status: status,
-        statusText: this.data.statusText,
-        statusImage: this.data.statusImage,
-        imgWidth: this.data.imgWidth,
-        imgHeight: this.data.imgHeight
+        status: "LOADING",
+        statusText: this.properties.loadingText,
+        statusImage: this.properties.loadingImage,
+        imgWidth: this.properties.loadingImageWidth,
+        imgHeight: this.properties.loadingImageHeight
+      })
+    },
+    showEmpty: function(){
+      this.setData({
+        status: "EMPTY",
+        statusText: this.properties.emptyText,
+        statusImage: this.properties.emptyImage,
+        imgWidth: this.properties.emptyImageWidth,
+        imgHeight: this.properties.emptyImageHeight
+      })
+    },
+    showError: function(){
+      this.setData({
+        status: "ERROR",
+        statusText: this.properties.errorText,
+        statusImage: this.properties.errorImage,
+        imgWidth: this.properties.errorImageWidth,
+        imgHeight: this.properties.errorImageHeight
+      })
+    },
+    showContent: function(){
+      this.setData({
+        status: "CONTENT"
       })
     }
+
   }
 })
diff --git a/components/statusLayout/statusLayout.wxml b/components/statusLayout/statusLayout.wxml
@@ -1,5 +1,5 @@
-<!--components/statusView/statusView.wxml-->
-<view class="status-layout-root" >
+<!--components/statusLayout/statusLayout.wxml -->
+<view class="status-layout-root" style="{{rootStyle}}">
     <view class="status-main" hidden="{{status=='CONTENT'}}">
         <image class="{{status=='LOADING'?'status-image-anim':''}}" style="width:{{imgWidth}}px; height:{{imgHeight}}px;" src='{{statusImage}}'></image>
         <view>{{statusText}}</view>

diff --git a/pages/index/index.js b/pages/index/index.js
@@ -5,27 +5,38 @@ var statusLayout
 Page({
   data: {
     datas: ['测试数据1', '测试数据2', '测试数据3', '测试数据4', '测试数据5'],
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
+    system: {}
   },
   //事件处理函数
   onReady: function(){
+    var that = this
     statusLayout = this.selectComponent("#statusLayout")
+    wx.getSystemInfo({
+      success: function(res) {
+        console.log(res)
+        that.setData({
+          system: res
+        })
+      }
+    })
   },
   onLoad: function () {
   },
   testStatusLayout: function(e) {
-    statusLayout.setStatus("LOADING")
+    statusLayout.showLoading()
+    // statusLayout.setStatus("LOADING")
     setTimeout(function(){
       var num = Math.floor(Math.random() * 10 + 1); //1-10
 
       if (num <= 3) {
-        statusLayout.setStatus("CONTENT")
+        statusLayout.showContent()
+        // statusLayout.setStatus("CONTENT")
       } else if (num <= 7) {
-        statusLayout.setStatus("ERROR")
+        statusLayout.showError()
+        // statusLayout.setStatus("ERROR")
       } else {
-        statusLayout.setStatus("EMPTY")
+        statusLayout.showEmpty()
+        // statusLayout.setStatus("EMPTY")
       }
     },1000)
   }

diff --git a/pages/index/index.wxml b/pages/index/index.wxml
@@ -1,7 +1,7 @@
 <!--index.wxml-->
 <view class="container">
   <button bindtap='testStatusLayout'>测试</button>
-    <statusLayout id="statusLayout" status='CONTENT'>
+    <statusLayout id="statusLayout" status='CONTENT' rootStyle="height:{{system.windowHeight-50}}px;">
       <block wx:for="{{datas}}" wx:for-index="id" wx:for-item="item">
               <view id="{{id}}">{{item}} </view>
       </block>