1

src/user_pages/queryTransactions/index.scss

@@ -1,4 +1,6 @@
 .listSearchContainer {
+  display: flex;
+  flex-direction: column;
   height: 100vh;
   box-sizing: border-box;
 
@@ -59,10 +61,9 @@
   }
 
   .topSearchWrapper {
-    position: sticky;
-    top: -1px;
     padding: 5px 15px;
     box-sizing: border-box;
+    flex-shrink: 0; // 固定在顶部，不随内容滚动
   }
 
   .topSearch {
@@ -80,6 +81,15 @@
     .nut-input {
       padding: 0;
       height: 100%;
+      background: transparent !important; // 去掉输入框背景
+      
+      :global(.nut-input-inner) {
+        background: transparent !important; // 去掉输入框内部背景
+      }
+      
+      :global(.nut-input-placeholder) {
+        background: transparent !important; // 去掉placeholder背景
+      }
     }
   }
 
@@ -247,7 +257,7 @@
         flex-direction: column;
         align-items: flex-end;
         gap: 4px;
-        width: 68px;
+        width: 100px;
         margin-right: 4px;
 
         .type_text_tag {
@@ -255,7 +265,8 @@
           font-weight: normal;
           color: #ff9500;
           border-radius: 999px !important;
-          padding: 4px;
+          padding: 4px 8px; // 增加左右内边距以增加宽度
+          min-width: 80px; // 设置最小宽度
           background-color: rgba(#ff9500, 0.1);
           border: solid 1px #ff9500;
           margin-right: 4px;
@@ -297,4 +308,11 @@
     padding: 20px 0 40px;
     background: #fff;
   }
+
+  // 中间内容滚动区域
+  .transactionContentScroll {
+    flex: 1;
+    height: 0; // 配合 flex: 1 使用，确保正确计算高度
+    overflow-y: auto;
+  }
 }

src/user_pages/queryTransactions/index.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef } from "react";
-import { View, Image, Text } from "@tarojs/components";
+import { View, Image, Text, ScrollView } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import img from "@/config/images";
 import { withAuth, GeneralNavbar } from "@/components";
 import "./index.scss";
 import httpService from "@/services/httpService";
-import Taro, { useReachBottom } from "@tarojs/taro";
+import Taro from "@tarojs/taro";
 import { useGlobalState } from "@/store/global";
 interface Transaction {
   id: number;
@@ -61,16 +61,6 @@ const QueryTransactions = () => {
   //   }
   // }, [ref.current]);
 
-  useReachBottom(() => {
-    if (load_transactions_params.page >= totalpages) return;
-    set_load_transactions_params((prev) => {
-      return {
-        ...prev,
-        page: prev.page + 1,
-      };
-    });
-  });
-
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
@@ -274,7 +264,7 @@ const QueryTransactions = () => {
             Taro.navigateBack();
           }}
         />
-        {/* 搜索 */}
+        {/* 搜索框 - 固定在顶部 */}
         <View 
           className="topSearchWrapper"
           style={{ marginTop: `${totalHeight}px` }}
@@ -318,42 +308,60 @@ const QueryTransactions = () => {
             </View>
           </View>
         </View>
-        {/* 查找历史 */}
-        {!isShowClearIcon && searchHistory.length > 0 && (
-          <View className="historySearch">
-            <View className="historySearchTitleWrapper">
-              <View className="historySearchTitle">查找历史</View>
-              <View className="historySearchClear" onClick={handleClearHistory}>
-                <Text>清空</Text>
-                <Image
-                  className="clearIcon icon16"
-                  src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
-                />
+        
+        {/* 中间内容区域 - 可滚动 */}
+        <ScrollView
+          scrollY
+          className="transactionContentScroll"
+          enhanced
+          showScrollbar={false}
+          onScrollToLower={() => {
+            if (load_transactions_params.page < totalpages) {
+              set_load_transactions_params((prev) => {
+                return {
+                  ...prev,
+                  page: prev.page + 1,
+                };
+              });
+            }
+          }}
+        >
+          {/* 查找历史 */}
+          {!isShowClearIcon && searchHistory.length > 0 && (
+            <View className="historySearch">
+              <View className="historySearchTitleWrapper">
+                <View className="historySearchTitle">查找历史</View>
+                <View className="historySearchClear" onClick={handleClearHistory}>
+                  <Text>清空</Text>
+                  <Image
+                    className="clearIcon icon16"
+                    src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
+                  />
+                </View>
               </View>
+
+              {searchHistory.length && (
+                <View className="historySearchList">
+                  {(searchHistory || [])?.map((item) => {
+                    if (!item?.keyword) {
+                      return null;
+                    }
+                    return (
+                      <Text
+                        className="historySearchItem"
+                        onClick={() => handleHistoryClick(item)}
+                      >
+                        {item?.keyword}
+                      </Text>
+                    );
+                  })}
+                </View>
+              )}
             </View>
+          )}
 
-            {searchHistory.length && (
-              <View className="historySearchList">
-                {(searchHistory || [])?.map((item) => {
-                  if (!item?.keyword) {
-                    return null;
-                  }
-                  return (
-                    <Text
-                      className="historySearchItem"
-                      onClick={() => handleHistoryClick(item)}
-                    >
-                      {item?.keyword}
-                    </Text>
-                  );
-                })}
-              </View>
-            )}
-          </View>
-        )}
-
-        {/* 交易记录列表 */}
-        <View className="transaction_list">
+          {/* 交易记录列表 */}
+          <View className="transaction_list">
           {loading_transactions ? (
             <View className="loading_state">
               <Text className="loading_text">加载中...</Text>
@@ -404,10 +412,11 @@ const QueryTransactions = () => {
               <Text className="empty_text">暂无交易记录</Text>
             </View>
           )}
-        </View>
-        {transactions.length > 0 && (
-          <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
-        )}
+          </View>
+          {transactions.length > 0 && (
+            <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
+          )}
+        </ScrollView>
       </View>
     </>
   );