学习页面技术高度

src/pages/index/components/videoList.tsx

@@ -1,9 +1,8 @@
 import {FC, useEffect, useMemo, useState} from "react";
-import {useDidShow} from "@tarojs/taro";
+import Taro, {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'
 import {formatMinute} from "@/utils/time";
 import {userApi} from "@/api";
 import Empty from "@/components/empty/empty";
@@ -23,6 +22,9 @@ export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
   const [page, setPage] = useState(1)
   const [records, setRecords] = useState<LearnRecord[]>([])
   const {token} = Profile.useContainer()
+  const {windowHeight, textBarHeight, statusBarHeight} = Taro.getApp().globalData
+  const pageHeight = windowHeight - textBarHeight - statusBarHeight
+
 
   function screen(oldData: Curriculum[], data: Curriculum[]): Curriculum[] {
     return data.reduce((pre, cur) => {
@@ -93,12 +95,12 @@ export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
   }, [data, categoryKey])
 
   return (
-    <Swiper className={styles.swiper}
+    <Swiper style={{height: pageHeight}}
             onChange={changeSwiper}
             current={categoryIndex}>
       {
         Object.entries(data).map(([key, value]) => <SwiperItem>
-          <ScrollView scrollY className={styles.swiper} onScrollToLower={() => setPage(page + 1)} enhanced
+          <ScrollView scrollY style={{height: pageHeight}} onScrollToLower={() => setPage(page + 1)} enhanced
                       showScrollbar={false}>
             {
               !token && key === 'is_required'

src/pages/index/index.module.scss

@@ -2,6 +2,8 @@
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
   padding: 0 20px;
   min-height: 100vh;
   box-sizing: border-box;
@@ -21,11 +23,6 @@
   }
 }
 
-.swiper {
-  height: calc(100vh  - 88rpx);
-}
-
-
 .videoListBox {
   border-radius: 20px;
 }