1

src/pages/index/index.scss

@@ -14,6 +14,11 @@
   }
 }
 
+.scroll-disabled {
+  overflow: hidden !important;
+  pointer-events: none;
+}
+
 .index-header {
   // background-image: url("https://img1.baidu.com/it/u=1184275824,54771083&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667");
   background-size: cover;

src/pages/index/index.tsx

@@ -13,6 +13,8 @@ function Index() {
   const [circleData, setCircleData] = useState<any>(null);
   const [tab1value, setTab1value] = useState<string | number>("1");
   const containerTopRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollEnabled, setScrollEnabled] = useState(false);
   const postListRef = useRef<PostListRef>(null);
   useEffect(() => {
     getCircleInfoApi({ id: 1 }).then((res: any) => {
@@ -25,13 +27,14 @@ function Index() {
     console.log("handleUpperThreshold");
   };
   const handleScroll = (e: any) => {
-    console.log("handleScroll", e);
-    if (e.detail.scrollTop > 50) {
-    } else {
+    if (e.detail.scrollTop === 0 && scrollEnabled) {
       containerTopRef.current?.scrollTo({
         top: 50,
         behavior: "smooth",
       });
+      disableScroll();
+    } else {
+      enableScroll();
     }
   };
 
@@ -45,6 +48,38 @@ function Index() {
       postListRef.current.loadMore();
     }
   };
+
+  // 禁用滚动的函数
+  const disableScroll = () => {
+    setScrollEnabled(false);
+  };
+
+  // 启用滚动的函数
+  const enableScroll = () => {
+    setScrollEnabled(true);
+  };
+
+  // 监听滚动事件
+  useEffect(() => {
+    containerTopRef.current?.addEventListener("scroll", (e) => {
+      console.log("e.target?.scrollTop", e.target?.scrollTop);
+      if (e.target?.scrollTop > 60) {
+        setScrollEnabled(true);
+      } else {
+        setScrollEnabled(false);
+      }
+    });
+    return () => {
+      containerTopRef.current?.removeEventListener("scroll", (e) => {
+        if (e.target?.scrollTop > 60) {
+          setScrollEnabled(true);
+        } else {
+          setScrollEnabled(false);
+        }
+      });
+    };
+  }, []);
+
   return (
     <View
       style={{ height: "calc(100vh)" }}
@@ -120,9 +155,6 @@ function Index() {
               }}
             >
               <TabPane title="游戏介绍">
-                <GameIntro />
-              </TabPane>
-              <TabPane title="最新">
                 <ScrollView
                   upperThreshold={50}
                   lowerThreshold={50}
@@ -131,6 +163,22 @@ function Index() {
                   onScroll={handleScroll}
                   scrollY
                   style={{ height: "calc(100vh)" }}
+                >
+                  <GameIntro />
+                </ScrollView>
+              </TabPane>
+              <TabPane title="最新">
+                <ScrollView
+                  upperThreshold={50}
+                  lowerThreshold={50}
+                  // onScrollToUpper={handleUpperThreshold}
+                  onScrollToLower={handleScrollToLower}
+                  onScroll={handleScroll}
+                  scrollY
+                  className={scrollEnabled ? "" : "scroll-disabled"}
+                  style={{
+                    height: "calc(100vh)",
+                  }}
                 >
                   <PostList ref={postListRef} />
                 </ScrollView>