Compare commits

...

3 Commits

Author SHA1 Message Date
xxx
8a3bbd565b fixed: 底部导航栏悬浮bug 2024-01-09 09:32:46 +08:00
xxx
f71df2a461 移除hls.min.js的依赖 2024-01-08 16:14:56 +08:00
unknown
5e054cdd54 下拉刷新 2024-01-08 12:28:43 +08:00
7 changed files with 181 additions and 148 deletions

View File

@ -13,11 +13,6 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script
crossorigin="anonymous"
integrity="sha512-oHrfR/z2wkuRuaHrdZ9NhoT/o/1kteub+QvmQgVzOKK7NTvIKQMvnY9+/RR0+eW311o4lAE/YzzLXXmP2XUvig=="
src="https://lib.baomitu.com/hls.js/1.1.4/hls.min.js"
></script>
<script type="text/javascript"> <script type="text/javascript">
if ( if (
typeof WeixinJSBridge == "object" && typeof WeixinJSBridge == "object" &&

View File

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

View File

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

View File

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

View File

@ -0,0 +1,7 @@
.playedu-app {
width: 100vw;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}

View File

@ -2,15 +2,16 @@ import { Suspense } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import LoadingPage from "../../loading"; import LoadingPage from "../../loading";
import { TabBarFooter } from "../../../components"; import { TabBarFooter } from "../../../components";
import styles from "./index.module.scss";
const WithoutHeaderWithoutFooter = () => { const WithoutHeaderWithoutFooter = () => {
return ( return (
<> <div className={styles["playedu-app"]}>
<Suspense fallback={<LoadingPage />}> <Suspense fallback={<LoadingPage />}>
<Outlet /> <Outlet />
</Suspense> </Suspense>
<TabBarFooter></TabBarFooter> <TabBarFooter></TabBarFooter>
</> </div>
); );
}; };

View File

@ -1,5 +1,6 @@
import { useState, useEffect } from "react"; 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 styles from "./index.module.scss";
import { course } from "../../api/index"; import { course } from "../../api/index";
import { Empty } from "../../components"; import { Empty } from "../../components";
@ -17,14 +18,11 @@ const StudyPage = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoading(true);
getCourses(); getCourses();
}, []); }, []);
const getCourses = () => { const getCourses = () => {
if (loading) {
return;
}
setLoading(true);
course course
.latestLearn() .latestLearn()
.then((res: any) => { .then((res: any) => {
@ -61,6 +59,14 @@ const StudyPage = () => {
return ( return (
<div className="main-body"> <div className="main-body">
<div className={styles["title"]}></div> <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"]}> <div className={styles["list-box"]}>
{loading && {loading &&
Array.from({ length: 2 }).map((_, i) => ( Array.from({ length: 2 }).map((_, i) => (
@ -143,6 +149,8 @@ const StudyPage = () => {
</> </>
)} )}
</div> </div>
</PullToRefresh>
</div>
</div> </div>
); );
}; };