From 98c6f8c3e521077681b3149eac3de87a45d24ada Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Wed, 23 Aug 2023 17:47:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E6=BB=91=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/home.module.scss | 31 ------------ src/pages/index/components/videoList.tsx | 62 +++++++++++++++--------- src/pages/index/index.config.ts | 6 +-- src/pages/index/index.module.scss | 19 ++++---- src/pages/index/index.tsx | 8 ++- 5 files changed, 55 insertions(+), 71 deletions(-) diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss index 1c2fcfe..d2b5e90 100644 --- a/src/pages/home/home.module.scss +++ b/src/pages/home/home.module.scss @@ -1,29 +1,3 @@ -.header { - font-weight: bold; - font-size: 34rpx; - position: fixed; - width: 100%; - left: 0; - top: 0; - overflow: hidden; - text-align: center; - color: #000; - - &:after { - min-height: 100vh; - position: absolute; - top: 0; - left: -10%; - width: 120%; - content: ''; - display: block; - background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat; - min-height: 100vh; - background-size: 100% 600rpx; - z-index: -1; - } -} - .tipsLogin { padding: 24rpx; color: #fff; @@ -48,7 +22,6 @@ overflow: hidden; &:after { - //min-height: 100vh; position: absolute; top: 0; left: -10%; @@ -56,11 +29,7 @@ height: 400rpx; content: ''; display: block; - //background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat; background: linear-gradient(to bottom, #92ecc5, #f1f8f6) no-repeat; - //min-height: 100vh; - //background-size: 100% 600rpx; - //filter: blur(50px); z-index: -1; } } diff --git a/src/pages/index/components/videoList.tsx b/src/pages/index/components/videoList.tsx index 10c422f..4352a77 100644 --- a/src/pages/index/components/videoList.tsx +++ b/src/pages/index/components/videoList.tsx @@ -1,6 +1,6 @@ import {FC, useEffect, useState} from "react"; -import {useDidShow, useReachBottom} from "@tarojs/taro"; -import {View} from "@tarojs/components"; +import {useDidShow} from "@tarojs/taro"; +import {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components"; import {Courses, CoursesKey, publicApi} from "@/api/public"; import VideoCover from "@/components/videoCover/videoCover"; import styles from '../index.module.scss' @@ -11,14 +11,15 @@ import eventsIndex from "@/hooks/eventsIndex"; interface Props { categoryKey: CoursesKey + setCategoryKey: (categoryKey: CoursesKey) => void } -export const VideoList: FC = ({categoryKey}) => { +export const VideoList: FC = ({categoryKey, setCategoryKey}) => { const [data, setData] = useState({ is_finished: [], + is_not_required: [], is_required: [], is_not_finished: [], - is_not_required: [] }) const [page, setPage] = useState(1) const [records, setRecords] = useState([]) @@ -38,13 +39,12 @@ export const VideoList: FC = ({categoryKey}) => { async function getData() { try { const res = await publicApi.course({page: page, pageSize: 10}) - const old: Courses = JSON.parse(JSON.stringify(data)) setData({ - is_finished: screen(old.is_finished, res.is_finished || []), is_required: screen(old.is_required, res.is_required || []), - is_not_finished: screen(old.is_not_finished, res.is_not_finished || []), is_not_required: screen(old.is_not_required, res.is_not_required || []), + is_finished: screen(old.is_finished, res.is_finished || []), + is_not_finished: screen(old.is_not_finished, res.is_not_finished || []), }) } catch (e) { } @@ -77,10 +77,6 @@ export const VideoList: FC = ({categoryKey}) => { } } - useReachBottom(() => { - setPage(page + 1) - }) - eventsIndex.on(({id}) => { if (id == null) return; for (const [index, notFinished] of data.is_not_finished.entries()) { @@ -101,19 +97,39 @@ export const VideoList: FC = ({categoryKey}) => { getData().then() getRecords().then() }, [page]) + + + function changeSwiper(e) { + const index = e.detail.current + const categoryKeys: CoursesKey[] = Object.keys(data) as CoursesKey[] + setCategoryKey(categoryKeys[index]) + } + return ( - - {data?.[categoryKey]?.length ? data?.[categoryKey]?.map(c => - ) : } - + d === categoryKey)}> + { + Object.values(data).map((value) => + setPage(page + 1)}> + + { + value?.length ? value?.map(c => + ) + : + } + + + ) + } + ) } diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts index 3e1da21..3637195 100644 --- a/src/pages/index/index.config.ts +++ b/src/pages/index/index.config.ts @@ -1,5 +1,5 @@ export default definePageConfig({ - navigationStyle: 'custom', - navigationBarTitleText:'医学道', - onReachBottomDistance: 30 + navigationBarTitleText: '医学道', + navigationBarBackgroundColor: '#92ecc5', + navigationBarTextStyle: 'white', }) diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss index f51f3b1..81eddcc 100644 --- a/src/pages/index/index.module.scss +++ b/src/pages/index/index.module.scss @@ -1,30 +1,31 @@ - .content { - position: relative; + position: fixed; + top: 0; + left: 0; padding: 0 20px; - min-height: 90vh; + min-height: 100vh; box-sizing: border-box; width: 750rpx; overflow: hidden; &:after { - min-height: 100vh; position: absolute; top: 0; left: -10%; width: 120%; + height: 400rpx; content: ''; display: block; - background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat; - min-height: 100vh; - background-size: 100% 600rpx; - filter: blur(50px); + background: linear-gradient(to bottom, #92ecc5, #f1f8f6) no-repeat; z-index: -1; } } +.swiper { + height: calc(100vh - 88rpx); +} + .videoListBox { border-radius: 20px; } - diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index dc9c625..99032e0 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -4,10 +4,8 @@ import styles from './index.module.scss' import {VideoList} from "@/pages/index/components/videoList"; import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs"; import {CoursesKey} from "@/api/public"; -import Taro from '@tarojs/taro' const Index: FC = () => { - const globalData = Taro.getApp().globalData const category: TabList[] = [ {title: "必修", value: 'is_required'}, {title: "选修", value: 'is_not_required'}, @@ -20,12 +18,12 @@ const Index: FC = () => { setCategoryKey(data.tab?.value as CoursesKey) } + return ( <> - - {process.env.TARO_ENV !== "h5" && 医学道} + - + setCategoryKey(categoryKey)}/> )