fix: 修复首页刷新跳动问题

MuxiKeStack · Dec 25, 2024 · 259c0b1 · 259c0b1
1 parent c628aac
commit 259c0b1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 42 deletions.
diff --git a/src/common/components/Comment/index.tsx b/src/common/components/Comment/index.tsx
@@ -61,43 +61,33 @@ const CommentHeader: React.FC<CommentProps> = memo((props) => {
 
   return (
     <>
-      {!course_info ? (
-        <>
-          <View className="italic text-gray-400">加载中 ...</View>
-        </>
-      ) : (
+      <>
+        <View className="classTitle" onClick={handleClickToClass}>
+          {course_info?.name
+            ? `${course_info?.name} (${course_info?.teacher}) `
+            : '加载中 ...'}
+        </View>
+      </>
+      <View className="comment">
         <>
-          <View className="classTitle" onClick={handleClickToClass}>
-            {`${course_info?.name} (${course_info?.teacher}) `}
+          <View
+            className="tx"
+            style={`background-image: url(${publisher_info?.avatar});`}
+          ></View>
+          <View className="userName">{publisher_info?.nickname}</View>
+          <View className="time">
+            {' '}
+            {formatIsoDate(new Date(ctime as number).toISOString())}
+          </View>
+          <View className="stars">
+            <ShowStar score={star_rating}></ShowStar>
           </View>
+          <Image
+            style={`display:${isHot ? 'block' : 'none'}`}
+            className="fire"
+            src="https://s2.loli.net/2023/11/12/2ITKRcDPMZaQCvk.png"
+          ></Image>
         </>
-      )}
-      <View className="comment">
-        {!publisher_info ? (
-          <>
-            <View className="italic text-gray-400">加载中 ...</View>
-          </>
-        ) : (
-          <>
-            <View
-              className="tx"
-              style={`background-image: url(${publisher_info?.avatar});`}
-            ></View>
-            <View className="userName">{publisher_info?.nickname}</View>
-            <View className="time">
-              {' '}
-              {formatIsoDate(new Date(ctime as number).toISOString())}
-            </View>
-            <View className="stars">
-              <ShowStar score={star_rating}></ShowStar>
-            </View>
-            <Image
-              style={`display:${isHot ? 'block' : 'none'}`}
-              className="fire"
-              src="https://s2.loli.net/2023/11/12/2ITKRcDPMZaQCvk.png"
-            ></Image>
-          </>
-        )}
       </View>
     </>
   );

diff --git a/src/pages/classInfo/index.config.ts b/src/pages/classInfo/index.config.ts
@@ -1,5 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '课程主页',
   navigationBarBackgroundColor: '#F9F9F2',
-  disableScroll: true,
+  // disableScroll: true,
 });
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -73,7 +73,9 @@ export default function Index() {
       void dispatch
         .refershComments()
         .then(() => {
-          Taro.hideLoading();
+          setTimeout(() => {
+            Taro.hideLoading();
+          }, 1000);
         })
         .catch(() => {
           Taro.hideLoading();
@@ -105,8 +107,12 @@ export default function Index() {
   const geneHandler = () => {
     let timeNow = Date.now();
     return (e) => {
+      scrollTopMap.current = {
+        ...scrollTopMap.current,
+        [classType]: scrollTopMap.current[classType] + 200,
+      };
       if (!useCourseStore.getState().loading && Date.now() - timeNow > 1000) {
-        void Taro.showLoading({ title: '加载中...' });
+        void Taro.showLoading({ title: '加载中...', mask: true });
         void dispatch
           .loadMoreComments()
           .then(() => {
@@ -171,17 +177,15 @@ export default function Index() {
         current={Object.keys(COURSE_NAME_MAP).indexOf(classType)}
         onChange={handleSwiperChange}
       >
-        {Object.entries(scrollTopMap.current).map(([name]) => (
+        {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
+        {Object.entries(scrollTopMap.current).map(([name, scrollTop]) => (
           <SwiperItem key={name}>
             <ScrollView
-              scrollWithAnimation
               onScroll={handleScroll}
-              scrollAnimationDuration="300"
               onScrollToLower={loadMoreHandler}
               lowerThreshold={200}
               refresherEnabled
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              scrollTop={scrollTopMap.current[name]}
+              scrollTop={scrollTop}
               style={{ height: '70vh' }}
               refresherTriggered={refresherTriggered}
               scrollY