添加下拉刷新

src/main.js

@@ -35,7 +35,8 @@ import {
   Progress,
   Skeleton,
   Tag,
-  Popover
+  Popover,
+  PullRefresh
 } from "vant";
 
 window.$_http = axios;
@@ -67,6 +68,7 @@ Vue.component("VanCellGroup", CellGroup);
 Vue.component("VanSkeleton", Skeleton);
 Vue.component("VanTag", Tag);
 Vue.component("vanPopover", Popover);
+Vue.component("VanPullRefresh", PullRefresh);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/views/home/answer/page-answer-special.vue

@@ -1,46 +1,37 @@
 <template>
   <div class="contentBody pageAnswerSpecial">
     <van-nav-bar title="专项答题" left-arrow @click-left="handleBackFun" />
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad()"
-    >
-      <van-cell
-        class="vanCell"
-        v-for="(item, index) in specialAnswerList"
-        :key="index"
-      >
-        <div slot="default" class="contentItemDiv">
-          <div class="contentItemTitle">
-            {{ item.name }}
-          </div>
-          <div class="createdTime" style="margin-top: 0.5rem">
-            {{
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad()">
+        <van-cell class="vanCell" v-for="(item, index) in specialAnswerList" :key="index">
+          <div slot="default" class="contentItemDiv">
+            <div class="contentItemTitle">{{ item.name }}</div>
+            <div class="createdTime" style="margin-top: 0.5rem">
+              {{
               item.createdTime
-                ? formateDatesFun(item.createdTime)
-                : item.createdTime
-            }}
-          </div>
-          <div v-if="!item.available" style="color: #696969">已作答</div>
-          <div class="startAnswerBox" @click="clickAnswer(item)">
-            <!-- 此处的div不可以注释，否则样式会变，只需要注释时间即可 -->
-            <div class="createdTime">
-              <!-- {{ formateDatesFun(item.createdTime) }} -->
+              ? formateDatesFun(item.createdTime)
+              : item.createdTime
+              }}
             </div>
-            <div
-              :class="{
+            <div v-if="!item.available" style="color: #696969">已作答</div>
+            <div class="startAnswerBox" @click="clickAnswer(item)">
+              <!-- 此处的div不可以注释，否则样式会变，只需要注释时间即可 -->
+              <div class="createdTime">
+                <!-- {{ formateDatesFun(item.createdTime) }} -->
+              </div>
+              <div
+                :class="{
                 startButtonBox: item.available,
                 disableButtonBox: !item.available,
               }"
-            >
-              <span class="startText">开始答题</span>
+              >
+                <span class="startText">开始答题</span>
+              </div>
             </div>
           </div>
-        </div>
-      </van-cell>
-    </van-list>
+        </van-cell>
+      </van-list>
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -57,7 +48,8 @@ export default {
       finished: false,
       specialPage: 0,
       specialSize: 10,
-      specialFlag: true
+      specialFlag: true,
+      isLoading: false
     };
   },
   created() {
@@ -122,6 +114,14 @@ export default {
     // 操作：返回
     handleBackFun() {
       this.$router.back();
+    },
+    onRefresh() {
+      this.specialPage = 0;
+      this.getSpecialAnswerList();
+      setTimeout(() => {
+        Toast("刷新成功");
+        this.isLoading = false;
+      }, 500);
     }
   }
 };

src/views/home/answer/page-answer-week.vue

@@ -1,36 +1,25 @@
 <template>
   <div class="contentBody pageAnswerWeek">
     <van-nav-bar title="每周答题" left-arrow @click-left="handleBackFun" />
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad"
-    >
-      <van-cell
-        class="vanCell"
-        v-for="(item, index) in weekAnswerList"
-        :key="index"
-      >
-        <div slot="default" class="contentItemDiv">
-          <div class="contentItemTitle">
-            {{ item.name }}
-          </div>
-          <div v-if="!item.available" style="color: #696969">
-              已作答
-          </div>
-          <div class="startAnswerBox" @click="clickAnswer(item)">
-            <!-- 此处的div不可以注释，否则样式会变，只需要注释时间即可 -->
-            <div>
-              <!-- {{ formateDatesFun(item.createdTime) }} -->
-            </div>
-            <div :class="{'startButtonBox':item.available,'disableButtonBox':!item.available}">
-              <span class="startText">开始答题</span>
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <van-cell class="vanCell" v-for="(item, index) in weekAnswerList" :key="index">
+          <div slot="default" class="contentItemDiv">
+            <div class="contentItemTitle">{{ item.name }}</div>
+            <div v-if="!item.available" style="color: #696969">已作答</div>
+            <div class="startAnswerBox" @click="clickAnswer(item)">
+              <!-- 此处的div不可以注释，否则样式会变，只需要注释时间即可 -->
+              <div>
+                <!-- {{ formateDatesFun(item.createdTime) }} -->
+              </div>
+              <div :class="{'startButtonBox':item.available,'disableButtonBox':!item.available}">
+                <span class="startText">开始答题</span>
+              </div>
             </div>
           </div>
-        </div>
-      </van-cell>
-    </van-list>
+        </van-cell>
+      </van-list>
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -46,7 +35,8 @@ export default {
       loading: false,
       finished: false,
       weeklyPage: 0,
-      weeklySize: 10
+      weeklySize: 10,
+      isLoading: false
     };
   },
   created() {
@@ -104,6 +94,14 @@ export default {
     // 操作：返回
     handleBackFun() {
       this.$router.back();
+    },
+    onRefresh() {
+      this.weeklyPage = 0;
+      this.getWeekAnswerList();
+      setTimeout(() => {
+        Toast("刷新成功");
+        this.isLoading = false;
+      }, 500);
     }
   }
 };

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

@@ -1,70 +1,64 @@
 <template>
   <div class="contentBody">
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad"
-    >
-      <template>
-        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
-          <van-swipe-item v-for="(item, index) in swiperList" :key="index">
-            <van-image
-              width="100%"
-              height="100%"
-              fit="cover"
-              :src="item.imageUrl"
-              :show-error="true"
-              @click="clickCarousels(item)"
-            />
-          </van-swipe-item>
-        </van-swipe>
-      </template>
-      <van-cell
-        v-for="(contentItem, contentIndex) in contentList"
-        :key="contentIndex"
-        @click="chooseContent(contentIndex)"
-      >
-        <div slot="default" class="contentItemDiv" v-if="contentItem">
-          <div class="contentItemTitleTitleRow">
-            <div class="contentItemTitle">{{ contentItem.name }}</div>
-            <div v-if="contentItem.isNeedStudyToday" class="contentItemstates">
-              今日必学
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <template>
+          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+            <van-swipe-item v-for="(item, index) in swiperList" :key="index">
+              <van-image
+                width="100%"
+                height="100%"
+                fit="cover"
+                :src="item.imageUrl"
+                :show-error="true"
+                @click="clickCarousels(item)"
+              />
+            </van-swipe-item>
+          </van-swipe>
+        </template>
+        <van-cell
+          v-for="(contentItem, contentIndex) in contentList"
+          :key="contentIndex"
+          @click="chooseContent(contentIndex)"
+        >
+          <div slot="default" class="contentItemDiv" v-if="contentItem">
+            <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">
-              所需学习时间：{{
+                }}
+              </div>
+              <div class="contentItemDescriptionStudyNeedTime">
+                所需学习时间：{{
                 getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
-              }}
+                }}
+              </div>
             </div>
           </div>
-        </div>
-      </van-cell>
-    </van-list>
+        </van-cell>
+      </van-list>
+    </van-pull-refresh>
   </div>
 </template>
 
 <script>
+import { Toast } from "vant";
 import { mapState } from "vuex";
 export default {
   name: "page-learn-recommend",
   components: {},
-  props: {
-    // 轮播图的数据
-    swiperList: null
-  },
   data() {
     return {
       contentList: [],
       loading: false,
-      finished: false
+      finished: false,
+      isLoading: false,
+      swiperList: []
     };
   },
   computed: {
@@ -147,6 +141,14 @@ export default {
         name: "learn-content",
         params: { materialId: this.contentList[index].id }
       });
+    },
+    onRefresh() {
+      this.getNewsfeed();
+      this.getCarousels();
+      setTimeout(() => {
+        Toast("刷新成功");
+        this.isLoading = false;
+      }, 500);
     }
   }
 };
@@ -174,11 +176,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;

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

@@ -2,15 +2,9 @@
   <div class="page-learn">
     <van-tabs :active="active" @click="rootChange" line-width="10px">
       <!-- 根目录 -->
-      <van-tab
-        v-for="(item, index) in learnRootList"
-        :key="index"
-        :title="item.name"
-      >
-        <PageLearnChild v-if="index !== 0" :parentId="parentId">
-        </PageLearnChild>
-        <PageLearnRecommend v-if="index === 0" :swiperList="swiperList">
-        </PageLearnRecommend>
+      <van-tab v-for="(item, index) in learnRootList" :key="index" :title="item.name">
+        <PageLearnChild v-if="index !== 0" :parentId="parentId"></PageLearnChild>
+        <PageLearnRecommend v-if="index === 0"></PageLearnRecommend>
       </van-tab>
     </van-tabs>
   </div>
@@ -32,26 +26,15 @@ export default {
       active: 0,
       learnRootList: [],
       choosedRootIndex: 0,
-      swiperList: [],
       parentId: ""
     };
   },
   computed: {},
   created() {
-    this.getSwiperListDataFun();
     this.getLearnRootList();
   },
   mounted() {},
   methods: {
-    // 查询轮播图数据列表
-    getSwiperListDataFun() {
-      this.swiperList = [
-        { url: require("@/assets/image/swipe/01.jpg") },
-        { url: require("@/assets/image/swipe/02.jpg") },
-        { url: require("@/assets/image/swipe/03.jpg") },
-        { url: require("@/assets/image/swipe/02.jpg") }
-      ];
-    },
     //   查询学习根目录
     getLearnRootList() {
       this.$_http