下拉刷新

src/main.scss

@@ -32,6 +32,13 @@ code {
   float: left;
   height: auto;
 }
+
+.float-left {
+  width: 100%;
+  height: auto;
+  float: left;
+}
+
 .main-header {
   position: relative;
   width: 100%;

src/pages/index/index.module.scss

@@ -107,7 +107,7 @@
   width: 100%;
   height: auto;
   box-sizing: border-box;
-  padding: 96px 20px 55px 20px;
+  padding: 0px 20px 55px 20px;
   text-align: left;
   overflow-x: hidden;
   overflow-y: auto;

src/pages/index/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Dropdown, Skeleton, Tabs } from "antd-mobile";
+import { Dropdown, PullToRefresh, Skeleton, Tabs } from "antd-mobile";
+import { sleep } from "antd-mobile/es/utils/sleep";
 import { DropdownRef } from "antd-mobile/es/components/dropdown";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
@@ -71,14 +72,15 @@ const IndexPage = () => {
   }, []);
 
   useEffect(() => {
+    setLoading(true);
     if (currentDepId === 0) {
+      setLoading(false);
       return;
     }
     getData();
   }, [currentDepId, categoryId]);
 
   const getData = () => {
-    setLoading(true);
     user.courses(currentDepId, categoryId).then((res: any) => {
       const records = res.data.learn_course_records;
       setLearnCourseRecords(records);
@@ -265,6 +267,17 @@ const IndexPage = () => {
           </Dropdown.Item>
         </Dropdown>
       </div>
+      <div
+        className="float-left"
+        style={{ position: "relative", paddingTop: 96 }}
+      >
+        <PullToRefresh
+          onRefresh={async () => {
+            setLoading(true);
+            await sleep(700);
+            getData();
+          }}
+        >
           <div className={styles["list-box"]}>
             {loading &&
               Array.from({ length: 2 }).map((_, i) => (
@@ -320,6 +333,8 @@ const IndexPage = () => {
                 <Footer></Footer>
               </>
             )}
+          </div>{" "}
+        </PullToRefresh>
       </div>
     </div>
   );

src/pages/study/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
-import { Skeleton } from "antd-mobile";
+import { PullToRefresh, Skeleton } from "antd-mobile";
+import { sleep } from "antd-mobile/es/utils/sleep";
 import styles from "./index.module.scss";
 import { course } from "../../api/index";
 import { Empty } from "../../components";
@@ -17,14 +18,11 @@ const StudyPage = () => {
   }, []);
 
   useEffect(() => {
+    setLoading(true);
     getCourses();
   }, []);
 
   const getCourses = () => {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
     course
       .latestLearn()
       .then((res: any) => {
@@ -61,6 +59,14 @@ const StudyPage = () => {
   return (
     <div className="main-body">
       <div className={styles["title"]}>最近学习</div>
+      <div className="float-left" style={{ position: "relative" }}>
+        <PullToRefresh
+          onRefresh={async () => {
+            setLoading(true);
+            await sleep(700);
+            getCourses();
+          }}
+        >
           <div className={styles["list-box"]}>
             {loading &&
               Array.from({ length: 2 }).map((_, i) => (
@@ -143,6 +149,8 @@ const StudyPage = () => {
               </>
             )}
           </div>
+        </PullToRefresh>
+      </div>
     </div>
   );
 };