列表

src/pages/list/index.module.scss

@@ -3,14 +3,14 @@
 
   .listTopSearchWrapper {
     padding: 0 15px;
-    position: sticky;
+    // position: sticky;
     background: #fefefe;
-    z-index: 999;
+    // z-index: 999;
   }
 
-  .isScroll {
-    border-bottom: 0.5px solid #0000000F;
-  }
+  // .isScroll {
+  //   border-bottom: 0.5px solid #0000000F;
+  // }
 
   .listTopFilterWrapper {
     display: flex;

src/pages/list/index.tsx

@@ -8,15 +8,18 @@ import Taro, { usePageScroll, useReachBottom } from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
 import { View } from "@tarojs/components";
-import CustomerNavBar from "@/components/CustomNavbar";
+import CustomerNavBar from "@/container/listCustomNavbar";
+import InputCustomerBar from "@/container/inputCustomerNavbar";
 import GuideBar from "@/components/GuideBar";
 import ListContainer from "@/container/listContainer";
+import img from "@/config/images";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
   const store = useListStore() || {};
 
   const { statusNavbarHeightInfo } = useGlobalState() || {};
+  const { totalHeight } = statusNavbarHeightInfo || {};
   const {
     isShowFilterPopup,
     error,
@@ -33,11 +36,18 @@ const ListPage = () => {
     quickFilterData,
     distanceQuickFilter,
     isScrollTop,
+    searchValue,
+    isShowInputCustomerNavBar,
   } = store;
 
   usePageScroll((res) => {
-    if (res?.scrollTop > 0 && !isScrollTop) {
-      updateState({ isScrollTop: true });
+    // if (res?.scrollTop > 0 && !isScrollTop) {
+    //   updateState({ isScrollTop: true });
+    // }
+    if (res?.scrollTop >= totalHeight && !isScrollTop) {
+      updateState({ isShowInputCustomerNavBar: true });
+    } else {
+      updateState({ isShowInputCustomerNavBar: false });
     }
   });
 
@@ -105,28 +115,40 @@ const ListPage = () => {
     });
   };
 
+  const handleSearchClick = () => {
+    Taro.navigateTo({
+      url: "/pages/search/index",
+    });
+  }
+
   return (
     <>
-      <CustomerNavBar />
+      {!isShowInputCustomerNavBar ? (
+        <CustomerNavBar />
+      ) : (
+        <InputCustomerBar icon={img.ICON_LIST_INPUT_LOGO} />
+      )}
 
       <View className={styles.listPage}>
         <View
           className={`${styles.listTopSearchWrapper} ${
             isScrollTop ? styles.isScroll : ""
           }`}
-          style={{
-            top: statusNavbarHeightInfo?.totalHeight,
-          }}
+          // style={{
+          //   top: statusNavbarHeightInfo?.totalHeight,
+          // }}
         >
           <SearchBar
             handleFilterIcon={toggleShowPopup}
             isSelect={filterCount > 0}
             filterCount={filterCount}
             onChange={handleSearchChange}
+            value={searchValue}
+            onInputClick={handleSearchClick}
           />
           {/* 综合筛选 */}
           {isShowFilterPopup && (
-            <div>
+            <View>
               <FilterPopup
                 loading={loading}
                 onCancel={toggleShowPopup}
@@ -138,7 +160,7 @@ const ListPage = () => {
                 onClose={toggleShowPopup}
                 statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
               />
-            </div>
+            </View>
           )}
           {/* 筛选 */}
           <div className={styles.listTopFilterWrapper}>
@@ -161,13 +183,13 @@ const ListPage = () => {
           </div>
         </View>
 
-          {/* 列表内容 */}
-          <ListContainer
-            data={matches}
-            loading={loading}
-            error={error}
-            reload={refreshMatches}
-          />
+        {/* 列表内容 */}
+        <ListContainer
+          data={matches}
+          loading={loading}
+          error={error}
+          reload={refreshMatches}
+        />
       </View>
 
       <GuideBar currentPage="list" />