处理列表

src/container/listContainer/index.tsx

@@ -2,9 +2,8 @@ import { View } from "@tarojs/components";
 import ListCard from "@/components/ListCard";
 import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
-// import { VirtualList } from '@nutui/nutui-react-taro'
-import "./index.scss";
 import { useReachBottom } from "@tarojs/taro";
+import "./index.scss";
 
 const ListContainer = (props) => {
   const {
@@ -12,14 +11,12 @@ const ListContainer = (props) => {
     data = [],
     error,
     reload,
-    recommendList,
+    // recommendList,
     loadMoreMatches,
   } = props;
-  console.log("===data", data);
 
   useReachBottom(() => {
-    console.log("触底了");
-    // 调用 store 的加载更多方法
+    // 加载更多方法
     loadMoreMatches();
   });
 
@@ -39,17 +36,6 @@ const ListContainer = (props) => {
 
   // 渲染列表
   const renderList = (list) => {
-    // 请求未回来显示骨架屏
-    // if (loading && list?.length === 0) {
-    //   return (
-    //     <>
-    //       {new Array(10).fill(0).map(() => {
-    //         return <ListCardSkeleton />;
-    //       })}
-    //     </>
-    //   );
-    // }
-
     // 请求数据为空
     if (!loading && list?.length === 0) {
       return <ListLoadError reload={reload} text="暂无数据" />;
@@ -58,15 +44,6 @@ const ListContainer = (props) => {
     // 渲染数据
     return (
       <>
-        {/* <VirtualList
-      containerHeight={1000}
-      itemHeight={144}
-      // itemEqual={false}
-      list={list}
-      itemRender={(data) => {
-        return <ListCard {...data}/>
-      }}
-      /> */}
         {list?.map((match, index) => (
           <ListCard key={match.id || index} {...match} />
         ))}
@@ -76,15 +53,25 @@ const ListContainer = (props) => {
 
   return (
     <View className="listContentWrapper">
-      {renderList(data)}
-      {/* 显示骨架屏 */}
-      {loading && renderSkeleton()}
-      {/* <View className="recommendTextWrapper">
+      {/* <ScrollView
+        scrollY
+        scrollWithAnimation
+        enableBackToTop
+        enablePassive
+        style={{ height: '100vh' }}
+        onScrollToLower={handleScrollToLower}
+        upperThreshold={60}
+      > */}
+        {renderList(data)}
+        {/* 显示骨架屏 */}
+        {loading && renderSkeleton()}
+        {/* <View className="recommendTextWrapper">
         <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
       </View>
       {renderList(recommendList)} */}
-      {/* 到底了 */}
-      {data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
+        {/* 到底了 */}
+        {data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
+      {/* </ScrollView> */}
     </View>
   );
 };

src/container/listCustomNavbar/index.scss

@@ -113,28 +113,31 @@
   width: 100%;
   height: 100%;
 
-  /* 过渡动画设置，实现平滑切换 */
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  /* 启用硬件加速 */
+  will-change: opacity, transform;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  
+  /* 优化过渡动画，使用更快的缓动函数 */
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
+              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* 第一个元素样式 */
 .firstElement {
-  // background-color: #4a90e2;
 }
 
 /* 第二个元素样式 */
 .secondElement {
-  // background-color: #5cb85c;
   /* 初始状态：透明且稍微偏移 */
   opacity: 0;
-  // transform: translateY(20px);
+  transform: translateY(10px);
 }
 
 /* 隐藏状态 */
 .hidden {
   opacity: 0;
-  transform: translateY(20px);
-  // pointer-events: none; /* 隐藏时不响应鼠标事件 */
+  transform: translateY(10px);
 }
 
 /* 可见状态 */

src/container/listCustomNavbar/index.tsx

@@ -2,7 +2,6 @@ import { View, Text, Image } from "@tarojs/components";
 import img from "@/config/images";
 import { useGlobalState } from "@/store/global";
 import { useUserInfo, } from '@/store/userStore'
-
 import { useListState } from "@/store/listStore";
 import CustomNavbar from "@/components/CustomNavbar";
 import { Input } from "@nutui/nutui-react-taro";
@@ -26,13 +25,11 @@ const ListHeader = (props: IProps) => {
     leftIconClick,
   } = config || {};
   const {
-    location,
-    getLocationText,
     getLocationLoading,
     statusNavbarHeightInfo,
   } = useGlobalState();
   const { gamesNum, searchValue, isShowInputCustomerNavBar } = useListState();
-  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+  const { navbarHeight } = statusNavbarHeightInfo;
 
   const { city,district } = useUserInfo()
 
@@ -68,6 +65,11 @@ const ListHeader = (props: IProps) => {
     }
   };
 
+  const navbarStyle = {
+    height: `${navbarHeight}px`,
+    paddingTop: `4px`,
+  };
+
   return (
     <CustomNavbar>
       <View className="listNavWrapper">
@@ -75,10 +77,7 @@ const ListHeader = (props: IProps) => {
         <View
           className={`listNavContainer toggleElement firstElement hidden ${(!isShowInputCustomerNavBar && !showInput) && "visible"
             }`}
-          style={{
-            height: `${navbarHeight}px`,
-            paddingTop: `${statusBarHeight}px`,
-          }}
+          style={navbarStyle}
         >
           <View className="listNavContentWrapper">
             {/* logo */}
@@ -106,10 +105,7 @@ const ListHeader = (props: IProps) => {
         <View
           className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(isShowInputCustomerNavBar || showInput) && "visible"
             } ${showInput && "inputCustomerNavbarShowInput"}`}
-          style={{
-            height: `${navbarHeight}px`,
-            paddingTop: `${statusBarHeight}px`,
-          }}
+          style={navbarStyle}
         >
           <View className="navContent">
             {/* logo */}
@@ -137,4 +133,5 @@ const ListHeader = (props: IProps) => {
     </CustomNavbar>
   );
 };
+
 export default ListHeader;