设备状态ui提交

pages/news/subpages/deviceCenter/index.vue

@@ -2,9 +2,12 @@
   <view class="message-page">
     <!-- 消息列表 -->
     <scroll-view
+        v-if="messageList.length > 0"
         :scroll-y="true"
         class="message-list"
         :refresher-enabled="true"
+        :scroll-anchoring="true"
+        refresher-background="#f5f5f5"
         :refresher-triggered="refreshing"
         @refresherrefresh="onRefresh"
     >
@@ -34,6 +37,11 @@
         </view>
       </view>
     </scroll-view>
+    <view class="empty__item tn-margin-top" v-else>
+      <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
+                text="空空如也" :imgWidth="200"
+                :imgHeight="200"></tn-empty>
+    </view>
   </view>
 </template>
 
@@ -82,7 +90,8 @@ export default {
           sender: 'T薛策恒',
           date: '03月24'
         }
-      ]
+      ],
+      isHaveOldData: true
     }
   },
   onShow() {
@@ -129,6 +138,14 @@ export default {
     // 下拉刷新（新增，最小改动）
     onRefresh() {
       this.refreshing = true;
+      if (!this.isHaveOldData) {
+        setTimeout(() => {
+          this.$modal.msg("没有更早数据！");
+          // 结束刷新状态
+          this.refreshing = false;
+        }, 800);
+        return;
+      }
       // 模拟接口请求延迟
       setTimeout(() => {
         // 生成10条新数据
@@ -148,7 +165,11 @@ export default {
   }
 }
 </script>
-
+<style lang="scss">
+@import '@/tuniao-ui/index.scss';
+@import '@/colorui/main.css';
+@import '@/colorui/icon.css';
+</style>
 <style scoped>
 /* 页面容器 */
 .message-page {