列表联调

src/container/listContainer/index.tsx

@@ -1,36 +1,72 @@
-import { View, Text } from "@tarojs/components";
+import { View } from "@tarojs/components";
 import ListCard from "@/components/ListCard";
 import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
+// import { VirtualList } from '@nutui/nutui-react-taro'
 import "./index.scss";
 import { useReachBottom } from "@tarojs/taro";
 
 const ListContainer = (props) => {
-  const { loading, data = [], error, reload, recommendList } = props;
+  const {
+    loading,
+    data = [],
+    error,
+    reload,
+    recommendList,
+    loadMoreMatches,
+  } = props;
+  console.log("===data", data);
 
   useReachBottom(() => {
     console.log("触底了");
     // 调用 store 的加载更多方法
-    // loadMoreMatches();
+    loadMoreMatches();
   });
 
   if (error) {
     return <ListLoadError reload={reload} />;
   }
 
-  const renderList = (list) => {
-    if (loading && list.length === 0) {
-      return (
-        <>
-          {new Array(10).fill(0).map(() => {
-            return <ListCardSkeleton />;
-          })}
-        </>
-      );
-    }
-
+  const renderSkeleton = () => {
     return (
       <>
+        {new Array(10).fill(0).map(() => {
+          return <ListCardSkeleton />;
+        })}
+      </>
+    );
+  };
+
+  // 渲染列表
+  const renderList = (list) => {
+    // 请求未回来显示骨架屏
+    // if (loading && list?.length === 0) {
+    //   return (
+    //     <>
+    //       {new Array(10).fill(0).map(() => {
+    //         return <ListCardSkeleton />;
+    //       })}
+    //     </>
+    //   );
+    // }
+
+    // 请求数据为空
+    if (!loading && list?.length === 0) {
+      return <ListLoadError reload={reload} text="暂无数据" />;
+    }
+
+    // 渲染数据
+    return (
+      <>
+        {/* <VirtualList
+      containerHeight={1000}
+      itemHeight={144}
+      // itemEqual={false}
+      list={list}
+      itemRender={(data) => {
+        return <ListCard {...data}/>
+      }}
+      /> */}
         {list?.map((match, index) => (
           <ListCard key={match.id || index} {...match} />
         ))}
@@ -41,12 +77,14 @@ const ListContainer = (props) => {
   return (
     <View className="listContentWrapper">
       {renderList(data)}
-      <View className="recommendTextWrapper">
+      {/* 显示骨架屏 */}
+      {loading && renderSkeleton()}
+      {/* <View className="recommendTextWrapper">
         <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
       </View>
-      {renderList(recommendList)}
+      {renderList(recommendList)} */}
       {/* 到底了 */}
-      <View className="bottomTextWrapper">到底了</View>
+      {data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
     </View>
   );
 };