学习滑动

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

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<Props> = ({categoryKey}) => {
+export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
   const [data, setData] = useState<Courses>({
     is_finished: [],
+    is_not_required: [],
     is_required: [],
     is_not_finished: [],
-    is_not_required: []
   })
   const [page, setPage] = useState(1)
   const [records, setRecords] = useState<LearnRecord[]>([])
@@ -38,13 +39,12 @@ export const VideoList: FC<Props> = ({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<Props> = ({categoryKey}) => {
     }
   }
 
-  useReachBottom(() => {
-    setPage(page + 1)
-  })
-
   eventsIndex.on(({id}) => {
     if (id == null) return;
     for (const [index, notFinished] of data.is_not_finished.entries()) {
@@ -101,9 +97,23 @@ export const VideoList: FC<Props> = ({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 (
-    <View className={'py-2 flex justify-between flex-wrap ' + styles.videoListBox}>
-      {data?.[categoryKey]?.length ? data?.[categoryKey]?.map(c =>
+    <Swiper className={styles.swiper} onChange={changeSwiper}
+            current={Object.keys(data).findIndex(d => d === categoryKey)}>
+      {
+        Object.values(data).map((value) => <SwiperItem>
+          <ScrollView scrollY className={styles.swiper} onScrollToLower={() => setPage(page + 1)}>
+            <View className='py-2 flex justify-between flex-wrap'>
+              {
+                value?.length ? value?.map(c =>
                     <VideoCover
                       thumb={c.thumb}
                       title={c.title}
@@ -112,8 +122,14 @@ export const VideoList: FC<Props> = ({categoryKey}) => {
                       key={c.id}
                       time={formatMinute(c.course_duration)}
                       content={rateOfLearning(c.id, c.class_hour)}
-        />) : <Empty name='暂无数据'/>}
+                    />)
+                  : <Empty name='暂无课程'/>
+              }
             </View>
+          </ScrollView>
+        </SwiperItem>)
+      }
+    </Swiper>
   )
 }
 

src/pages/index/index.config.ts

@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationStyle: 'custom',
   navigationBarTitleText: '医学道',
-  onReachBottomDistance: 30
+  navigationBarBackgroundColor: '#92ecc5',
+  navigationBarTextStyle: 'white',
 })

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

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 (
     <>
-      <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
-        {process.env.TARO_ENV !== "h5" && <View className='text-center font-weight font-34 mt-3'>医学道</View>}
+      <View className={styles.content}>
         <Tabs tabList={category} onChange={tabChange} current={categoryKey}/>
-        <VideoList categoryKey={categoryKey}/>
+        <VideoList categoryKey={categoryKey} setCategoryKey={(categoryKey) => setCategoryKey(categoryKey)}/>
       </View>
     </>
   )