yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2025-06-29 00:22:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

下拉刷新

Browse Source
This commit is contained in:
unknown 2024-01-08 12:28:43 +08:00
parent 19df4739ad
commit 5e054cdd54
4 changed files with 171 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main.scss
View File

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

2
src/pages/index/index.module.scss
View File

@ -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;

129
src/pages/index/index.tsx
View File

@ -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,61 +267,74 @@ const IndexPage = () => {
</Dropdown.Item>
</Dropdown>
</div>
<div className={styles["list-box"]}>
{loading &&
Array.from({ length: 2 }).map((_, i) => (
<div
style={{
width: "100%",
height: 75,
display: "flex",
alignItems: "center",
marginBottom: 30,
marginTop: 30,
}}
key={i}
>
<Skeleton
animated
style={{
width: 100,
height: 75,
borderRadius: 8,
marginRight: 15,
}}
/>
<div
style={{
flex: 1,
height: 75,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
}}
>
<Skeleton animated style={{ width: "100%", height: 21 }} />
<Skeleton animated style={{ width: "100%", height: 24 }} />
</div>
</div>
))}
{!loading && coursesList.length === 0 && <Empty></Empty>}
{!loading && coursesList.length > 0 && (
<>
{coursesList.map((item: any) => (
<div className={styles["item"]} key={item.id}>
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
record={learnCourseRecords[item.id]}
hourCount={learnCourseHourCount[item.id]}
></CoursesModel>
</div>
))}
<Footer></Footer>
</>
)}
<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) => (
<div
style={{
width: "100%",
height: 75,
display: "flex",
alignItems: "center",
marginBottom: 30,
marginTop: 30,
}}
key={i}
>
<Skeleton
animated
style={{
width: 100,
height: 75,
borderRadius: 8,
marginRight: 15,
}}
/>
<div
style={{
flex: 1,
height: 75,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
}}
>
<Skeleton animated style={{ width: "100%", height: 21 }} />
<Skeleton animated style={{ width: "100%", height: 24 }} />
</div>
</div>
))}
{!loading && coursesList.length === 0 && <Empty></Empty>}
{!loading && coursesList.length > 0 && (
<>
{coursesList.map((item: any) => (
<div className={styles["item"]} key={item.id}>
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
record={learnCourseRecords[item.id]}
hourCount={learnCourseHourCount[item.id]}
></CoursesModel>
</div>
))}
<Footer></Footer>
</>
)}
</div>{" "}
</PullToRefresh>
</div>
</div>
);

174
src/pages/study/index.tsx
View File

@ -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,87 +59,97 @@ const StudyPage = () => {
return (
<div className="main-body">
<div className={styles["title"]}>最近学习</div>
<div className={styles["list-box"]}>
{loading &&
Array.from({ length: 2 }).map((_, i) => (
<div className={styles["item"]} key={i}>
<Skeleton
animated
style={{
width: 100,
height: 75,
borderRadius: 8,
marginRight: 15,
}}
/>
<div className={styles["item-info"]}>
<Skeleton animated style={{ width: "100%", height: 21 }} />
<Skeleton animated style={{ width: "100%", height: 24 }} />
</div>
</div>
))}
{!loading &&
courses.length === 0 &&
todayCourses.length === 0 &&
yesterdayCourses.length === 0 && <Empty></Empty>}
{!loading && (
<>
{todayCourses.length > 0 && (
<>
<div className={styles["label"]}>今日</div>
{todayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
<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) => (
<div className={styles["item"]} key={i}>
<Skeleton
animated
style={{
width: 100,
height: 75,
borderRadius: 8,
marginRight: 15,
}}
/>
<div className={styles["item-info"]}>
<Skeleton animated style={{ width: "100%", height: 21 }} />
<Skeleton animated style={{ width: "100%", height: 24 }} />
</div>
))}
</div>
))}
{!loading &&
courses.length === 0 &&
todayCourses.length === 0 &&
yesterdayCourses.length === 0 && <Empty></Empty>}
{!loading && (
<>
{todayCourses.length > 0 && (
<>
<div className={styles["label"]}>今日</div>
{todayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
{yesterdayCourses.length > 0 && (
<>
<div className={styles["label"]}>昨日</div>
{yesterdayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
{courses.length > 0 && (
<>
<div className={styles["label"]}>更早</div>
{courses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
</>
)}
{yesterdayCourses.length > 0 && (
<>
<div className={styles["label"]}>昨日</div>
{yesterdayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
{courses.length > 0 && (
<>
<div className={styles["label"]}>更早</div>
{courses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
</>
)}
</div>
</PullToRefresh>
</div>
</div>
);