添加下拉刷新

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

@@ -1,57 +1,44 @@
 <template>
   <div class="contentBody" v-if="learnChildList.length > 0">
-    <van-tabs
-      :active="active"
-      type="line"
-      line-height="0px"
-      @click="childChange"
-    >
-      <!-- 子目录 -->
-      <van-tab
-        v-for="(tabItem, tabIndex) in learnChildList"
-        :key="tabIndex"
-        :title="tabItem.name"
-        :title-style="titleStyle"
-      >
-        <van-list
-          v-model="loading"
-          :finished="finished"
-          finished-text="没有更多了"
-          @load="onLoad"
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-tabs :active="active" type="line" line-height="0px" @click="childChange">
+        <!-- 子目录 -->
+        <van-tab
+          v-for="(tabItem, tabIndex) in learnChildList"
+          :key="tabIndex"
+          :title="tabItem.name"
+          :title-style="titleStyle"
         >
-          <van-cell
-            v-for="(contentItem, contentIndex) in contentList"
-            :key="contentIndex"
-            @click="chooseContent(contentIndex)"
-          >
-            <div slot="default" class="contentItemDiv">
-              <div class="contentItemTitleTitleRow">
-                <div class="contentItemTitle">{{ contentItem.name }}</div>
-                <div
-                  v-if="contentItem.isNeedStudyToday"
-                  class="contentItemstates"
-                >
-                  今日必学
+          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+            <van-cell
+              v-for="(contentItem, contentIndex) in contentList"
+              :key="contentIndex"
+              @click="chooseContent(contentIndex)"
+            >
+              <div slot="default" class="contentItemDiv">
+                <div class="contentItemTitleTitleRow">
+                  <div class="contentItemTitle">{{ contentItem.name }}</div>
+                  <div v-if="contentItem.isNeedStudyToday" class="contentItemstates">今日必学</div>
                 </div>
-              </div>
-              <div class="contentItemDescription">
-                <div class="contentItemDescriptionTime">
-                  {{
+                <div class="contentItemDescription">
+                  <div class="contentItemDescriptionTime">
+                    {{
                     formateDatesFun(contentItem.createdTime) ||
-                      contentItem.createdTime
-                  }}
-                </div>
-                <div class="contentItemDescriptionStudyNeedTime">
-                  所需学习时间：{{
+                    contentItem.createdTime
+                    }}
+                  </div>
+                  <div class="contentItemDescriptionStudyNeedTime">
+                    所需学习时间：{{
                     getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
-                  }}
+                    }}
+                  </div>
                 </div>
               </div>
-            </div>
-          </van-cell>
-        </van-list>
-      </van-tab>
-    </van-tabs>
+            </van-cell>
+          </van-list>
+        </van-tab>
+      </van-tabs>
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -81,7 +68,8 @@ export default {
       finished: false,
       learnChildList: [],
       learnPage: 0,
-      learnSize: 10
+      learnSize: 10,
+      isLoading: false
     };
   },
   computed: {
@@ -176,6 +164,13 @@ export default {
         name: "learn-content",
         params: { materialId: this.contentList[index].id }
       });
+    },
+    onRefresh() {
+      this.getChildList();
+      setTimeout(() => {
+        Toast("刷新成功");
+        this.isLoading = false;
+      }, 500);
     }
   }
 };
@@ -203,11 +198,11 @@ export default {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        word-wrap:break-word;
-        white-space:pre-wrap;
+        word-wrap: break-word;
+        white-space: pre-wrap;
         display: -webkit-box;
         -webkit-box-orient: ho;
-        -webkit-line-clamp:10;
+        -webkit-line-clamp: 10;
       }
       .contentItemstates {
         font-size: 0.6rem;