骨架屏

src/pages/aboutUs/Index.vue

@@ -6,6 +6,9 @@
       <div class="version">v{{ version }}</div>
       <br />
     </div>
+    <div class="sk" v-if="!content">
+      <van-skeleton title avatar :row="10" />
+    </div>
     <news v-if="content" :item="{ content: content }" />
   </div>
 </template>

src/pages/branchIntroduction/Index.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="branchIntroduction" class="app">
+    <div class="sk" v-if="!content">
+      <van-skeleton title avatar :row="15" />
+    </div>
     <news v-if="content" :item="{ content: content }" />
   </div>
 </template>
@@ -7,6 +10,8 @@
 <script>
 import news from "@/components/Detail/news.vue";
 
+import { Skeleton as vanSkeleton } from "vant";
+import "vant/lib/skeleton/style";
 export default {
   name: "app",
   data: function() {
@@ -22,7 +27,7 @@ export default {
     };
   },
   beforeDestroy: function() {},
-  components: { news }
+  components: { news, vanSkeleton }
 };
 </script>
 <style lang="scss">

src/pages/detail/AppDetail/Index.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="AppDetail" class="app">
+    <div class="sk" v-if="loda">
+      <van-skeleton title avatar :row="15" />
+    </div>
     <component
       v-if="id"
       :is="detailData.videoFlag"
@@ -13,6 +16,8 @@
 import A from "@/components/Detail/news.vue";
 import V from "@/components/Detail/video.vue";
 import U from "@/components/Detail/audio.vue";
+import { Skeleton as vanSkeleton } from "vant";
+import "vant/lib/skeleton/style";
 import { currentUrlToParams, setToken } from "@/utils/common.js";
 import { articleDetail } from "@/api/article/article.js";
 
@@ -20,6 +25,7 @@ export default {
   name: "app",
   data: function() {
     return {
+      loda: true,
       detailData: {},
       id: undefined
     };
@@ -33,11 +39,12 @@ export default {
     };
     articleDetail(this.$pageParams.id, true).then(res => {
       this.detailData = res || {};
+      this.loda = false;
       this.id = this.$pageParams.id;
     });
   },
   beforeDestroy: function() {},
-  components: { A, V, U }
+  components: { A, V, U, vanSkeleton }
 };
 </script>
 <style lang="scss">
@@ -46,4 +53,9 @@ body {
   height: auto !important;
   overflow: auto !important;
 }
+#AppDetail {
+  .sk {
+    padding: 2em 0;
+  }
+}
 </style>