列表搜索页面

src/container/listContainer/index.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   gap: 5px;
-  // background-color: red;
+  padding-bottom: 34px;
 
   .recommendTextWrapper {
     display: flex;
@@ -19,4 +19,17 @@
     font-weight: 500;
     line-height: 24px;
   }
+
+  .bottomTextWrapper {
+    width: 100%;
+    height: 68px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
 }

src/container/listContainer/index.tsx

@@ -3,10 +3,17 @@ import ListCard from "@/components/ListCard";
 import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
 import "./index.scss";
+import { useReachBottom } from "@tarojs/taro";
 
 const ListContainer = (props) => {
   const { loading, data = [], error, reload, recommendList } = props;
 
+  useReachBottom(() => {
+    console.log("触底了");
+    // 调用 store 的加载更多方法
+    // loadMoreMatches();
+  });
+
   if (error) {
     return <ListLoadError reload={reload} />;
   }
@@ -38,6 +45,8 @@ const ListContainer = (props) => {
         <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
       </View>
       {renderList(recommendList)}
+      {/* 到底了 */}
+      <View className="bottomTextWrapper">到底了</View>
     </View>
   );
 };