个人页、他人页优化

src/container/listContainer/index.scss

@@ -30,4 +30,25 @@
     font-weight: 500;
     line-height: 24px;
   }
+
+  .collapse-btn {
+    width: 100%;
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 14px;
+    letter-spacing: 0.38px;
+    color: rgba(0, 0, 0, .3);
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    Image {
+      width: 16px;
+      height: 16px;
+    }
+    &:not(.fold) Image {
+      transform: rotate(180deg);
+    }
+  }
 }

src/container/listContainer/index.tsx

@@ -1,4 +1,4 @@
-import { View } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
 import ListCard from "@/components/ListCard";
 import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
@@ -8,7 +8,7 @@ import { setStorage, getStorage } from "@/store/storage";
 import { NTRPTestEntryCard } from "@/components";
 import { EvaluateScene } from "@/store/evaluateStore";
 import "./index.scss";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 
 const ListContainer = (props) => {
   const {
@@ -23,9 +23,14 @@ const ListContainer = (props) => {
     emptyText,
     btnText,
     btnImg,
+    style,
+    collapse = false,
+    defaultShowNum,
   } = props;
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
+  const [showNumber, setShowNumber] = useState(0)
+
   const userInfo = useUserInfo();
 
   useReachBottom(() => {
@@ -38,6 +43,14 @@ const ListContainer = (props) => {
     // }, 500);
   });
 
+  useEffect(() => {
+    setShowNumber(
+      () => {
+        return defaultShowNum === undefined ? data?.length : defaultShowNum
+
+      })
+  }, [data])
+
   useEffect(() => {
     return () => {
       if (timerRef.current) {
@@ -97,6 +110,8 @@ const ListContainer = (props) => {
       );
     }
 
+    showNumber !== undefined && (list = list.slice(0, showNumber))
+
     // 渲染数据
     return (
       <>
@@ -113,7 +128,7 @@ const ListContainer = (props) => {
   };
 
   return (
-    <View className="listContentWrapper">
+    <View className="listContentWrapper" style={style}>
       {renderList(data)}
       {/* 显示骨架屏 */}
       {loading && renderSkeleton()}
@@ -122,7 +137,20 @@ const ListContainer = (props) => {
       </View>
       {renderList(recommendList)} */}
       {/* 到底了 */}
-      {data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
+      {collapse ?
+        data?.length > defaultShowNum ?
+          data?.length > showNumber ?
+            <View className="collapse-btn fold" onClick={() => { setShowNumber(data?.length) }}>
+              <Text>更多球局</Text>
+              <Image src={require("@/static/userInfo/fold.svg")}></Image>
+            </View> :
+            <View className="collapse-btn" onClick={() => { setShowNumber(defaultShowNum) }}>
+              <Text>收起</Text>
+              <Image src={require("@/static/userInfo/fold.svg")}></Image>
+            </View>
+          :
+          null
+        : data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
     </View>
   );
 };