自定列表导航栏

src/pages/list/index.tsx

@@ -7,14 +7,19 @@ import SearchBar from "../../components/SearchBar";
 import FilterPopup from "./FilterPopup";
 import styles from "./index.module.scss";
 import { useEffect } from "react";
-import Taro from "@tarojs/taro";
-import { useListStore } from "../../store/listStore";
+import Taro, { useReachBottom } from "@tarojs/taro";
+import { useListStore } from "@/store/listStore";
+import {useGlobalState} from '@/store/global'
 import { View } from "@tarojs/components";
+import CustomerNavBar from "@/components/CustomNavbar";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
   const store = useListStore() || {};
-  console.log("===store===", store);
+  
+    const {statusNavbarHeightInfo } = useGlobalState() || {}
+    // console.log("===store===", store);
+    // console.log('===statusNavbarHeightInfo', statusNavbarHeightInfo)
   const {
     isShowFilterPopup,
     error,
@@ -33,6 +38,12 @@ const ListPage = () => {
     distanceQuickFilter,
   } = store;
 
+  useReachBottom(() => {
+    console.log("触底了");
+    // 调用 store 的加载更多方法
+    // loadMoreMatches();
+  });
+
   useEffect(() => {
     // 页面加载时获取数据
     fetchMatches();
@@ -143,10 +154,6 @@ const ListPage = () => {
     updateState({ isShowFilterPopup: !isShowFilterPopup });
   };
 
-  const updateFilterSelect = (params) => {
-    updateState(params);
-  };
-
   /**
    * @description 更新筛选条件
    * @param {Record<string, any>} params 筛选项
@@ -166,69 +173,75 @@ const ListPage = () => {
       },
     });
   };
-  console.log("===visible", isShowFilterPopup);
+
   return (
-    <View className={styles.listPage}>
-      <View className={styles.listTopSearchWrapper}>
-        <SearchBar
-          handleFilterIcon={toggleShowPopup}
-          isSelect={filterCount > 0}
-          filterCount={filterCount}
-          onChange={handleSearchChange}
-        />
-        {/* 综合筛选 */}
-        {isShowFilterPopup && (
-          <div>
-            <FilterPopup
-              loading={loading}
-              onCancel={toggleShowPopup}
-              onConfirm={toggleShowPopup}
-              onChange={handleUpdateFilterOptions}
-              filterOptions={filterOptions}
-              onClear={clearFilterOptions}
-              visible={isShowFilterPopup}
-              onClose={toggleShowPopup}
+    <>
+      <CustomerNavBar />
+
+      <View className={styles.listPage}>
+        <View className={styles.listTopSearchWrapper}>
+          <SearchBar
+            handleFilterIcon={toggleShowPopup}
+            isSelect={filterCount > 0}
+            filterCount={filterCount}
+            onChange={handleSearchChange}
+          />
+          {/* 综合筛选 */}
+          {isShowFilterPopup && (
+            <div>
+              <FilterPopup
+                loading={loading}
+                onCancel={toggleShowPopup}
+                onConfirm={toggleShowPopup}
+                onChange={handleUpdateFilterOptions}
+                filterOptions={filterOptions}
+                onClear={clearFilterOptions}
+                visible={isShowFilterPopup}
+                onClose={toggleShowPopup}
+                statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+              />
+            </div>
+          )}
+          {/* 筛选 */}
+          <div className={styles.listTopFilterWrapper}>
+            {/* 全城筛选 */}
+            <CityFilter
+              options={distanceData}
+              value={distanceQuickFilter?.distance}
+              wrapperClassName={styles.menuFilter}
+              onChange={handleDistanceOrQuickChange}
+              name="distance"
+            />
+            {/* 智能排序 */}
+            <Menu
+              options={quickFilterData}
+              value={distanceQuickFilter?.quick}
+              onChange={handleDistanceOrQuickChange}
+              wrapperClassName={styles.menuFilter}
+              name="quick"
             />
           </div>
-        )}
-        {/* 筛选 */}
-        <div className={styles.listTopFilterWrapper}>
-          {/* 全城筛选 */}
-          <CityFilter
-            options={distanceData}
-            value={distanceQuickFilter?.distance}
-            wrapperClassName={styles.menuFilter}
-            onChange={handleDistanceOrQuickChange}
-            name="distance"
-          />
-          {/* 智能排序 */}
-          <Menu
-            options={quickFilterData}
-            value={distanceQuickFilter?.quick}
-            onChange={handleDistanceOrQuickChange}
-            wrapperClassName={styles.menuFilter}
-            name="quick"
-          />
-        </div>
-      </View>
+        </View>
 
-      <View className={styles.listContentWrapper}>
-        {/* 列表内容 */}
-        <List>
-          {!loading &&
-            matches.length > 0 &&
-            matches.map((match, index) => (
-              <ListCard key={match.id || index} {...match} />
-            ))}
-        </List>
+        <View className={styles.listContentWrapper}>
+          {/* 列表内容 */}
+          <List>
+            {!loading &&
+              matches.length > 0 &&
+              matches.map((match, index) => (
+                <ListCard key={match.id || index} {...match} />
+              ))}
+          </List>
 
-        {/* 空状态 */}
-        {loading &&
-          new Array(10).fill(0).map(() => {
-            return <ListCardSkeleton />;
-          })}
+          {/* 空状态 */}
+          {loading &&
+            matches.length === 0 &&
+            new Array(10).fill(0).map(() => {
+              return <ListCardSkeleton />;
+            })}
+        </View>
       </View>
-    </View>
+    </>
   );
 };