首页

src/api/circle/index.ts

@@ -0,0 +1,8 @@
+import request from "../../http/request";
+
+export const getCircleInfoApi = (params) => {
+  return request({
+    url: `/circles/info/${params.id}`,
+    method: "POST",
+  });
+};

src/api/post/index.ts

@@ -3,13 +3,17 @@ import request from "../../http/request";
 export const interactionBaseApi = "/interactions";
 /**
  * 帖子列表
- * @param params {target_type: string,target_id: number}
+ * @param params {circleId: number, page?: number, pageSize?: number}
  * @returns
  */
 export const circlePostListApi = (params) => {
   return request({
     url: `/posts/circle/${params.circleId}`,
     method: "POST",
+    data: {
+      page: params.page || 1,
+      limit: params.pageSize || 10,
+    },
   });
 };
 

src/components/comment-list/comment-input.tsx

@@ -8,26 +8,8 @@ const CommentInput = ({ postId, parentCommentId, onClose, onOK }) => {
   const textAreaRef = useRef<any>(null);
   const [form] = Form.useForm();
   const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
-  // 监听键盘高度变化
-  useEffect(() => {
-    const handleKeyboardHeightChange = (res) => {
-      setKeyboardHeight(res.height);
-      setIsKeyboardShow(res.height > 0);
-      if (res.height > 0) {
-        setIsInitialized(true);
-      }
-    };
-
-    // 监听键盘高度变化
-    Taro.onKeyboardHeightChange(handleKeyboardHeightChange);
-
-    return () => {
-      Taro.offKeyboardHeightChange(handleKeyboardHeightChange);
-    };
-  }, []);
 
   // 当评论输入框显示时，自动聚焦
   useLayoutEffect(() => {
@@ -88,9 +70,12 @@ const CommentInput = ({ postId, parentCommentId, onClose, onOK }) => {
             }}
             onFocus={() => {
               setIsInputFocused(true);
+              // setIsInitialized(true);
+              // setKeyboardHeight(300); // 使用估算的键盘高度
             }}
             onBlur={() => {
               setIsInputFocused(false);
+              setKeyboardHeight(0);
               onClose(false);
             }}
           />

src/components/comment-list/index.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from "@tarojs/components";
+import { View } from "@tarojs/components";
 import CommentListItem from "./item";
 import { useEffect, useState } from "react";
 import { getCommentListApi } from "../../api/comment";
@@ -9,15 +9,15 @@ const CommentList = ({ postId }) => {
   const [hasMore, setHasMore] = useState(true);
   const [commentsData, setCommentsData] = useState<any[]>([]);
   const [count, setCount] = useState(0);
-  useEffect(() => {
-    getCommentListApi({ post_id: postId }).then((res: any) => {
-      if (res.code === 200) {
-        setCommentsData(res.data.list);
-        setCount(res.data.count);
-        setHasMore(res.data.has_more);
-      }
-    });
-  }, [postId]);
+  // useEffect(() => {
+  //   getCommentListApi({ post_id: postId }).then((res: any) => {
+  //     if (res.code === 200) {
+  //       setCommentsData(res.data.list);
+  //       setCount(res.data.count);
+  //       setHasMore(res.data.has_more);
+  //     }
+  //   });
+  // }, [postId]);
 
   // 加载更多
   const handleLoadMore = () => {
@@ -25,12 +25,16 @@ const CommentList = ({ postId }) => {
   };
 
   useEffect(() => {
-    getCommentListApi({ post_id: postId, page: page }).then((res: any) => {
-      if (res.code === 200) {
-        setCommentsData([...commentsData, ...res.data.list]);
+    getCommentListApi({ post_id: postId, page: page, limit: 10 }).then(
+      (res: any) => {
+        if (res.code === 200) {
+          setCommentsData([...commentsData, ...res.data.list]);
+          setCount(res.data.count);
+          setHasMore(res.data.has_more);
+        }
       }
-    });
-  }, [page]);
+    );
+  }, [page, postId]);
 
   return (
     <View>

src/components/post-list/index.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from "@tarojs/components";
+import { Text, View, ScrollView } from "@tarojs/components";
 import { Heart, HeartFill, Plus } from "@nutui/icons-react-taro";
 import { Message } from "@nutui/icons-react-taro";
 import {
@@ -7,10 +7,11 @@ import {
   Image,
   ImagePreview,
   Toast,
+  PullToRefresh,
 } from "@nutui/nutui-react-taro";
 import MoreButton from "../fllower-button";
 import { circlePostListApi } from "../../api/post";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { strSlice } from "../../utils/index";
 import { followApi, interactionApi, unfollowApi } from "../../api/interaction";
 import { Dialog } from "@nutui/nutui-react-taro";
@@ -21,14 +22,69 @@ const PostList = () => {
   const [showPreview, setShowPreview] = useState(false);
   const [init, setInit] = useState(0);
   const [mediaUrl, setMediaUrl] = useState<any[]>([]);
-  const getPostList = () => {
-    circlePostListApi({ circleId: 1 }).then((res: any) => {
-      if (res.code === 200) {
-        setPostList(res.data.list);
-        console.log(res.data.list);
+
+  // 分页相关状态
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const pageSize = 10;
+
+  const getPostList = useCallback(
+    async (page = 1, isRefresh = false) => {
+      setLoading(true);
+      try {
+        const res: any = await circlePostListApi({
+          circleId: 1,
+          page,
+          pageSize: pageSize,
+        });
+
+        if (res.code === 200) {
+          const newList = res.data.list || [];
+          console.log("API Response:", {
+            page,
+            newListLength: newList.length,
+            hasMore: res.data.has_more,
+            isRefresh,
+          });
+
+          if (isRefresh || page === 1) {
+            setPostList(newList);
+          } else {
+            setPostList((prev) => [...prev, ...newList]);
+          }
+
+          // 判断是否还有更多数据
+          setHasMore(res.data.has_more);
+          setCurrentPage(page);
+        }
+      } catch (error) {
+        console.error("获取帖子列表失败:", error);
+        Toast.show("load_error", {
+          content: "加载失败，请重试",
+          duration: 2,
+        });
+      } finally {
+        setLoading(false);
       }
-    });
-  };
+    },
+    [pageSize]
+  );
+
+  // 下拉刷新
+  const handleRefresh = useCallback(async () => {
+    await getPostList(1, true);
+  }, [getPostList]);
+
+  // 上拉加载更多
+  const handleLoadMore = useCallback(async () => {
+    console.log("handleLoadMore called", { hasMore, currentPage, loading });
+    if (hasMore && !loading) {
+      console.log("Loading next page:", currentPage + 1);
+      await getPostList(currentPage + 1, false);
+    }
+  }, [hasMore, currentPage, getPostList, loading]);
+
   const handleMoreClick = (postIndex: number) => {
     const data = [...postList];
     data.splice(postIndex, 1);
@@ -100,151 +156,186 @@ const PostList = () => {
     }
   };
   useEffect(() => {
-    getPostList();
+    getPostList(1, true);
   }, []);
+
   return (
-    <View className="post-list bg-[#f8f8f8]">
-      {postList.map((item: any, index: number) => {
-        return (
-          <View
-            key={item.id}
-            className="post-list-item  bg-[#fff] p-[10px] mb-[10px]"
-          >
-            <View className="flex items-center justify-between">
-              <View className="flex items-center">
-                <View
-                  className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden bg-cover bg-center"
-                  style={{
-                    backgroundImage: item.user.avatar_url
-                      ? `url('${item.user.avatar_url}')`
-                      : "none",
-                  }}
-                ></View>
-                <View className="ml-[5px]">
-                  <View className="text-[14px] font-[800] text-[#9c9dee]">
-                    {item.user.nickname || item.user.username || "微信用户"}
+    <ScrollView
+      scrollY
+      className="post-list-scroll"
+      style={{ height: "100%" }}
+      onScrollToLower={handleLoadMore}
+      lowerThreshold={100}
+    >
+      <PullToRefresh onRefresh={handleRefresh}>
+        <View className="post-list bg-[#f8f8f8]">
+          {postList.map((item: any, index: number) => {
+            return (
+              <View
+                key={item.id}
+                className="post-list-item  bg-[#fff] p-[10px] mb-[10px]"
+              >
+                <View className="flex items-center justify-between">
+                  <View className="flex items-center">
+                    <View
+                      className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden bg-cover bg-center"
+                      style={{
+                        backgroundImage: item.user.avatar_url
+                          ? `url('${item.user.avatar_url}')`
+                          : "none",
+                      }}
+                    ></View>
+                    <View className="ml-[5px]">
+                      <View className="text-[14px] font-[800] text-[#9c9dee]">
+                        {item.user.nickname || item.user.username || "微信用户"}
+                      </View>
+                      {item.user.is_official ? (
+                        <View className="text-[12px] text-[#949494]">
+                          《心动女友》官方账号
+                        </View>
+                      ) : (
+                        <></>
+                      )}
+                    </View>
                   </View>
-                  {item.user.is_official ? (
-                    <View className="text-[12px] text-[#949494]">
-                      《心动女友》官方账号
+                  <View className="flex items-center">
+                    <View
+                      className="flex items-center justify-center mr-[12px] text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleFollowClick(item.user_id, item.is_followed);
+                      }}
+                    >
+                      {item.is_followed ? <></> : <Plus color="#1874d0" />}
+                      <Text>{item.is_followed ? "已关注" : "关注"}</Text>
                     </View>
-                  ) : (
-                    <></>
-                  )}
+                    {item.user.is_official ? (
+                      <></>
+                    ) : (
+                      <MoreButton
+                        postIndex={index}
+                        followeeId={item.user_id}
+                        postId={item.id}
+                        postItem={item}
+                        onClick={handleMoreClick}
+                      />
+                    )}
+                  </View>
                 </View>
-              </View>
-              <View className="flex items-center">
                 <View
-                  className="flex items-center justify-center mr-[12px] text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleFollowClick(item.user_id, item.is_followed);
-                  }}
-                >
-                  {item.is_followed ? <></> : <Plus color="#1874d0" />}
-                  <Text>{item.is_followed ? "已关注" : "关注"}</Text>
-                </View>
-                {item.user.is_official ? (
-                  <></>
-                ) : (
-                  <MoreButton
-                    postIndex={index}
-                    followeeId={item.user_id}
-                    postId={item.id}
-                    postItem={item}
-                    onClick={handleMoreClick}
-                  />
-                )}
-              </View>
-            </View>
-            <View
-              onClick={() =>
-                navigateTo({ url: `/pages/detail/index?id=${item.id}` })
-              }
-            >
-              <View className="text-[14px] text-[#333] pt-[20px]">
-                {strSlice(item.content, 100)}
-                {item.content.length > 100 && (
-                  <Text className="text-[#1874d0]">全文</Text>
-                )}
-              </View>
-              <View className="mt-[10px]">
-                <Grid
-                  columns={item.media_url.length < 3 ? 2 : 3} // 这里，如果图片小于3张，则columns为2，如果图片大于等于3张，则columns为3
-                  gap={7}
-                  style={
-                    {
-                      "--nutui-grid-item-content-padding": "0px",
-                      "--nutui-grid-item-content-margin": "0px",
-                      "--nutui-grid-border-color": "transparent",
-                    } as any
+                  onClick={() =>
+                    navigateTo({ url: `/pages/detail/index?id=${item.id}` })
                   }
                 >
-                  {item.media_url.map((ite: any, index: number) => {
-                    return (
-                      <GridItem>
-                        <Image
-                          width="100%"
-                          height="100px"
-                          src={ite.src}
-                          mode="widthFix"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setMediaUrl(item.media_url);
-                            setInit(index + 1);
-
-                            setShowPreview(true);
-                          }}
-                        />
-                      </GridItem>
-                    );
-                  })}
-                </Grid>
-              </View>
-              <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
-                <View className="flex items-center">
-                  <Message size={16} color="#949494" />
-                  <Text className="ml-[5px] text-[16px] text-[#949494]">
-                    {item.comment_count}
-                  </Text>
-                </View>
-                <View
-                  className="flex items-center"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleInteraction(
-                      item.id,
-                      item.interaction_type === "praise"
-                        ? "dispraise"
-                        : "praise"
-                    );
-                  }}
-                >
-                  {item.interaction_type === "praise" ? (
-                    <HeartFill size={16} color="#ec4342" />
-                  ) : (
-                    <Heart size={16} color="#949494" />
-                  )}
-                  <Text className="ml-[5px] text-[16px] text-[#949494]">
-                    {item.like_count}
-                  </Text>
+                  <View className="text-[14px] text-[#333] pt-[20px]">
+                    {strSlice(item.content, 100)}
+                    {item.content.length > 100 && (
+                      <Text className="text-[#1874d0]">全文</Text>
+                    )}
+                  </View>
+                  <View className="mt-[10px]">
+                    <Grid
+                      columns={item.media_url.length < 3 ? 2 : 3} // 这里，如果图片小于3张，则columns为2，如果图片大于等于3张，则columns为3
+                      gap={7}
+                      style={
+                        {
+                          "--nutui-grid-item-content-padding": "0px",
+                          "--nutui-grid-item-content-margin": "0px",
+                          "--nutui-grid-border-color": "transparent",
+                        } as any
+                      }
+                    >
+                      {item.media_url.map((ite: any, index: number) => {
+                        return (
+                          <GridItem>
+                            <Image
+                              width="100%"
+                              height="100px"
+                              src={ite.src}
+                              mode="widthFix"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setMediaUrl(item.media_url);
+                                setInit(index + 1);
+
+                                setShowPreview(true);
+                              }}
+                            />
+                          </GridItem>
+                        );
+                      })}
+                    </Grid>
+                  </View>
+                  <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
+                    <View className="flex items-center">
+                      <Message size={16} color="#949494" />
+                      <Text className="ml-[5px] text-[16px] text-[#949494]">
+                        {item.comment_count}
+                      </Text>
+                    </View>
+                    <View
+                      className="flex items-center"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleInteraction(
+                          item.id,
+                          item.interaction_type === "praise"
+                            ? "dispraise"
+                            : "praise"
+                        );
+                      }}
+                    >
+                      {item.interaction_type === "praise" ? (
+                        <HeartFill size={16} color="#ec4342" />
+                      ) : (
+                        <Heart size={16} color="#949494" />
+                      )}
+                      <Text className="ml-[5px] text-[16px] text-[#949494]">
+                        {item.like_count}
+                      </Text>
+                    </View>
+                  </View>
                 </View>
               </View>
+            );
+          })}
+
+          {/* 空状态提示 */}
+          {postList.length === 0 && !loading && (
+            <View className="flex flex-col items-center justify-center py-[50px]">
+              <Text className="text-[#999] text-[14px]">暂无帖子</Text>
             </View>
-          </View>
-        );
-      })}
-      <ImagePreview
-        images={mediaUrl}
-        visible={showPreview}
-        defaultValue={init}
-        onClose={() => setShowPreview(false)}
-        indicator
-      />
-      <Toast id="follow_success" />
-      <Dialog id="followed_dialog" />
-    </View>
+          )}
+
+          {/* 加载更多提示 */}
+          {hasMore && (
+            <View className="p-[20px] text-center">
+              <Text className="text-[14px] text-[#999]">
+                {loading ? "加载中..." : "上拉加载更多"}
+              </Text>
+            </View>
+          )}
+
+          {!hasMore && postList.length > 0 && (
+            <View className="p-[20px] text-center">
+              <Text className="text-[14px] text-[#999]">没有更多了</Text>
+            </View>
+          )}
+
+          <ImagePreview
+            images={mediaUrl}
+            visible={showPreview}
+            defaultValue={init}
+            onClose={() => setShowPreview(false)}
+            indicator
+          />
+          <Toast id="follow_success" />
+          <Toast id="load_error" />
+          <Dialog id="followed_dialog" />
+        </View>
+      </PullToRefresh>
+    </ScrollView>
   );
 };
 

src/pages/index/index.scss

@@ -12,3 +12,25 @@
     height: 100%;
   }
 }
+
+.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;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #fff;
+  width: calc(100vw - 20px);
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.index-content {
+  height: calc(100vh - 60px);
+}

src/pages/index/index.tsx

@@ -1,28 +1,63 @@
 import { View, Text } from "@tarojs/components";
-import { Mail, Plus } from "@nutui/icons-react-taro";
-// import TabbarCom from "../../components/tabbar";
+import { Plus, User } from "@nutui/icons-react-taro";
 import { navigateTo } from "@tarojs/taro";
 import PostList from "../../components/post-list";
 
 import "./index.scss";
+import { Image } from "@nutui/nutui-react-taro";
+import { useEffect, useState } from "react";
+import { getCircleInfoApi } from "../../api/circle";
 
 function Index() {
+  const [circleData, setCircleData] = useState<any>(null);
+  useEffect(() => {
+    getCircleInfoApi({ id: 1 }).then((res: any) => {
+      setCircleData(res.data);
+    });
+  }, []);
   return (
     <View className="index">
-      <View className="p-[10px]  bg-[#fff]">
-        <View className="h-25 flex justify-between">
-          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0] rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
+      <View
+        className="index-header fixed top-0 left-0 right-0 z-20 h-[60px] w-full flex items-center justify-between px-[10px]"
+        style={{ backgroundImage: `url(${circleData?.icon_url})` }}
+      >
+        <View className="flex items-center relative z-40">
+          <View className="w-[50px] h-[50px] bg-[#fff] rounded-[10px] overflow-hidden">
+            <Image
+              src={circleData?.icon_url}
+              width="100%"
+              height="100%"
+              mode="aspectFill"
+            />
+          </View>
+          <Text className="text-[16px] font-[800] text-[#fff] ml-[10px]">
+            {circleData?.name}
+          </Text>
+        </View>
+        {/* <View
+          className="flex items-center relative z-40"
+          onClick={() => {
+            navigateTo({ url: "/pages/self/index" });
+          }}
+        >
+          <User size={24} />
+        </View> */}
+      </View>
+
+      <View className="index-content absolute top-[60px] left-0 right-0 bottom-0 z-20 rounded-[30px] overflow-hidden">
+        <View className="h-25 p-[10px] flex ">
+          <View className="w-[22%] pt-[10px] mr-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0] rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
             <View className="text-[14px] font-[800] text-[#333]">福利中心</View>
             <View className="text-[12px] text-[#949494]">登录领奖</View>
           </View>
-          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
+          {/* <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
             <View className="text-[14px] font-[800] text-[#333]">游戏攻略</View>
             <View className="text-[12px] text-[#949494]">最新资讯</View>
           </View>
           <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
             <View className="text-[14px] font-[800] text-[#333]">组队开黑</View>
             <View className="text-[12px] text-[#949494]">寻找队友</View>
-          </View>
+          </View> */}
           <View
             className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]"
             onClick={() => {
@@ -33,34 +68,17 @@ function Index() {
             <View className="text-[12px] text-[#949494]">我的信息</View>
           </View>
         </View>
-        {/* <View className="pt-[20px]">
-          <View className="flex items-center">
-            <Mail color="#6682f0" />
-            <Text className="ml-[5px] text-[18px] font-[800] text-[#333]">
-              最新消息
-            </Text>
-          </View>
-          <View className="pt-[15px] flex items-center">
-            <View className="text-[12px] text-[#e7666c] border-[1rpx] border-solid border-[#e7666c] p-[0 3px] rounded-[3px] pl-[4px] pr-[4px]">
-              官方
-            </View>
-            <View className="text-[14px] text-[#333] ml-[5px]">
-              S13赛季【史前复仇者】来袭
-            </View>
-          </View>
-        </View> */}
-      </View>
-      <View className="mt-[10px]">
+
         <PostList />
-      </View>
-      {/* <TabbarCom /> */}
-      <View
-        className="fixed bottom-[50px] right-[20px] w-[50px] h-[50px] bg-[#1874d0] rounded-[50%] z-10 justify-center items-center flex "
-        onClick={() => {
-          navigateTo({ url: "/pages/publish/index" });
-        }}
-      >
-        <Plus color="#fff" size={50} style={{ marginLeft: "-2px" }} />
+        {/* <TabbarCom /> */}
+        <View
+          className="fixed bottom-[50px] right-[20px] w-[50px] h-[50px] bg-[#1874d0] rounded-[50%] z-10 justify-center items-center flex "
+          onClick={() => {
+            navigateTo({ url: "/pages/publish/index" });
+          }}
+        >
+          <Plus color="#fff" size={50} style={{ marginLeft: "-2px" }} />
+        </View>
       </View>
     </View>
   );

src/pages/message/list/index.scss

@@ -0,0 +1,3 @@
+.message-list {
+  height: calc(100vh - 64px);
+}

src/pages/message/list/index.tsx

@@ -14,12 +14,13 @@ import {
   getNotificationListApi,
   markAsReadByTypeApi,
 } from "../../../api/notifications";
+import "./index.scss";
 const MessageList = () => {
   const [showCommentInput, setShowCommentInput] = useState(false);
   const [notificationList, setNotificationList] = useState<any[]>([]);
   const [CommentPostId, setCommentPostId] = useState(0);
   const [CommentParentCommentId, setCommentParentCommentId] = useState(0);
-  const [typeId, setTypeId] = useState("0");
+  const [typeId, setTypeId] = useState("");
   const [title, setTitle] = useState("");
 
   // 分页相关状态
@@ -122,10 +123,12 @@ const MessageList = () => {
 
   useEffect(() => {
     // 重置分页状态
-    setCurrentPage(1);
-    setHasMore(true);
-    setNotificationList([]);
-    getNotificationList(1, true);
+    if (typeId) {
+      setCurrentPage(1);
+      setHasMore(true);
+      setNotificationList([]);
+      getNotificationList(1, true);
+    }
   }, [typeId]);
   return (
     <>
@@ -144,7 +147,7 @@ const MessageList = () => {
         {title}
       </NavBar>
       <ScrollView
-        className="bg-[#f8f8f8] h-full"
+        className="bg-[#f8f8f8] message-list"
         scrollY
         refresherEnabled
         refresherTriggered={refreshing}