列表

src/container/listContainer/index.scss

@@ -0,0 +1,8 @@
+.listContentWrapper {
+  padding: 0 5px;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  background-color: red;
+}

src/container/listContainer/index.tsx

@@ -0,0 +1,52 @@
+import { View } from "@tarojs/components";
+import ListCard from "@/components/ListCard";
+import ListLoadError from "@/components/ListLoadError";
+import ListCardSkeleton from "@/components/ListCardSkeleton";
+// import { useGlobalState } from "@/store/global";
+
+const ListContainer = (props) => {
+  const { loading, data = [], error, reload } = props;
+  // const { statusNavbarHeightInfo } = useGlobalState() || {};
+  // const { totalHeight } = statusNavbarHeightInfo;
+
+  const renderList = () => {
+    if (loading && data.length > 0) {
+      return (
+        <>
+          {new Array(10).fill(0).map(() => {
+            return <ListCardSkeleton />;
+          })}
+        </>
+      );
+    }
+
+    if (error) {
+      return <ListLoadError reload={reload} />;
+    }
+
+    if (loading && data.length === 0) {
+      return null;
+    }
+
+    return (
+      <>
+        {data.map((match, index) => (
+          <ListCard key={match.id || index} {...match} />
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <View
+      className="listContentWrapper"
+      // style={{
+      //   minHeight: `calc(100vh - ${totalHeight}px)`,
+      // }}
+    >
+      {renderList()}
+    </View>
+  );
+};
+
+export default ListContainer;