1

src/game_pages/search/index.scss

@@ -17,7 +17,7 @@
     gap: 10px;
     border-radius: 999px;
     border: 0.5px solid rgba(0, 0, 0, 0.06);
-    background: #FFF;
+    // background: #FFF;
     box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
 
     .nut-input {

src/game_pages/search/index.tsx

@@ -1,4 +1,4 @@
-import { View, Image, Text } from "@tarojs/components";
+import { View, Image, Text, ScrollView } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import { useEffect, useMemo, useRef } from "react";
 import { useListState } from "@/store/listStore";
@@ -125,9 +125,9 @@ const ListSearch = () => {
       />
       <View 
         className="listSearchContainer"
-        style={{ paddingTop: `${totalHeight + 10}px` }}
+        style={{ paddingTop: `${totalHeight}px` }}
       >
-        {/* 搜索 */}
+        {/* 搜索框 - 固定在顶部 */}
         <View className="topSearch">
           <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
           <Input
@@ -154,6 +154,14 @@ const ListSearch = () => {
             </Text>
           </View>
         </View>
+        
+        {/* 中间内容区域 - 可滚动 */}
+        <ScrollView
+          scrollY
+          className="searchContentScroll"
+          enhanced
+          showScrollbar={false}
+        >
           {/* 联想词 */}
           {isShowSuggestion && (
             <View className="searchSuggestion">
@@ -220,6 +228,7 @@ const ListSearch = () => {
               )}
             </View>
           )}
+        </ScrollView>
       </View>
     </>
   );

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,6 +308,24 @@ const QueryTransactions = () => {
             </View>
           </View>
         </View>
+        
+        {/* 中间内容区域 - 可滚动 */}
+        <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">
@@ -408,6 +416,7 @@ const QueryTransactions = () => {
           {transactions.length > 0 && (
             <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
           )}
+        </ScrollView>
       </View>
     </>
   );