列表搜索页面

src/container/listContainer/index.scss

@@ -4,5 +4,19 @@
   display: flex;
   flex-direction: column;
   gap: 5px;
-  background-color: red;
+  // background-color: red;
+
+  .recommendTextWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 22px 10px;
+  }
+
+  .recommendText {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
 }

src/container/listContainer/index.tsx

@@ -1,13 +1,18 @@
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import ListCard from "@/components/ListCard";
 import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
+import "./index.scss";
 
 const ListContainer = (props) => {
-  const { loading, data = [], error, reload } = props;
+  const { loading, data = [], error, reload, recommendList } = props;
 
-  const renderList = () => {
-    if (loading && data.length > 0) {
+  if (error) {
+    return <ListLoadError reload={reload} />;
+  }
+
+  const renderList = (list) => {
+    if (loading && list.length === 0) {
       return (
         <>
           {new Array(10).fill(0).map(() => {
@@ -17,17 +22,9 @@ const ListContainer = (props) => {
       );
     }
 
-    if (error) {
-      return <ListLoadError reload={reload} />;
-    }
-
-    if (loading && data.length === 0) {
-      return null;
-    }
-
     return (
       <>
-        {data.map((match, index) => (
+        {list?.map((match, index) => (
           <ListCard key={match.id || index} {...match} />
         ))}
       </>
@@ -35,13 +32,12 @@ const ListContainer = (props) => {
   };
 
   return (
-    <View
-      className="listContentWrapper"
-      // style={{
-      //   minHeight: `calc(100vh - ${totalHeight}px)`,
-      // }}
-    >
-      {renderList()}
+    <View className="listContentWrapper">
+      {renderList(data)}
+      <View className="recommendTextWrapper">
+        <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
+      </View>
+      {renderList(recommendList)}
     </View>
   );
 };