修改加载

src/views/home/learn/page-learn-child.vue

@@ -1,27 +1,24 @@
 <template>
-  <div class="contentBody" >
-    <div class="childLoading" v-if="childLoading">
-      <van-loading  type="spinner" vertical >加载中...</van-loading>
-    </div>
-    <van-pull-refresh v-else v-model="isLoading" @refresh="onRefresh">
+  <div class="contentBody" v-if="learnChildList.length>0">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
       <van-tabs
         :active="active"
         type="line"
         line-height="0px"
         @click="childChange"
       >
-        <div class="contentLoading" v-if="contentLoading">
-          <van-loading   type="spinner" vertical >加载中...</van-loading>
-        </div>
         <!-- 子目录 -->
         <van-tab
-          v-else
           v-for="(tabItem, tabIndex) in learnChildList"
           :key="tabIndex"
           :title="tabItem.name"
           :title-style="titleStyle"
         >
+          <div class="contentLoading" v-if="contentLoading">
+            <van-loading  type="spinner" vertical >加载中...</van-loading>
+          </div>
           <van-list
+            v-else
             v-model="loading"
             :finished="finished"
             finished-text="没有更多了"
@@ -124,8 +121,7 @@ export default {
       choosedChildIndex: 0,
       contentList: [],
       loading: false,
-      childLoading: true, // 子目录加载
-      contentLoading: false, // 子目录加载
+      contentLoading: true,
       finished: false,
       learnChildList: [],
       learnPage: 0,
@@ -166,10 +162,8 @@ export default {
           this.learnChildList = res.data;
           this.$store.commit("toggleLoading", false);
           this.learnPage = 0;
-          this.childLoading = false;
         })
         .catch(() => {
-          this.childLoading = false;
           this.$store.commit("toggleLoading", false);
         });
     },
@@ -252,14 +246,8 @@ export default {
 @import "~@/styles/mixin";
 .contentBody {
   background-color: #fff;
-   .childLoading {
-    height: 85vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-   }
-   .contentLoading{
-    height: 75vh;
+   .contentLoading {
+    height: 10vh;
     display: flex;
     justify-content: center;
     align-items: center;