优化滚动

src/pages/searchList/hightSearchList.tsx

@@ -8,10 +8,10 @@ import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
 import {useBluetooth} from "@/use/contextBlueTooth"
 import {toRgb} from '@/common/bluetooth/color/colorSpace'
 import styles  from './hightSearchList.module.scss'
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
 import {GetLabProductApi} from "@/api/material"
-import { getFilterData } from "@/common/util";
+import { dataLoadingStatus, getFilterData } from "@/common/util";
 import { formatHashTag, formatImgUrl } from "@/common/fotmat";
 import LoadingCard from "@/components/loadingCard";
 import useLogin from "@/use/useLogin";
@@ -64,11 +64,11 @@ export default () => {
         }
     }
 
-     //监听获得的数据变化
-     useEffect(() => {
-        (materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
-    }, [materialList])
 
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
+    }, [materialList])
 
     const [scrollStatus, setScrollStatus] = useState(false)
     const onscroll = useCallback((e) => {
@@ -176,12 +176,11 @@ export default () => {
             <View className={styles.list}>
                 <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
                 <View className={styles.scroll}>
-                    {(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
-                    {(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
-                    {(materialList.list.length > 0)&&<InfiniteScroll 
+                   
+                    <InfiniteScroll 
                         selfonScrollToLower={() => getScrolltolower()} 
                         selfOnScroll={(e) => onscroll(e)}
-                        hasMore={hasMore}
+                        statusMore={statusMore}
                     >
                         <View className={styles.product_list}>
                             {materialList.list.map(item => {
@@ -197,7 +196,7 @@ export default () => {
                                 </View>
                             })}
                         </View>
-                    </InfiniteScroll>}
+                    </InfiniteScroll>
                 </View>
             </View>
             <Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>

src/pages/searchList/searchList.tsx

@@ -7,12 +7,12 @@ import SortBtn from "@/components/sortBtn";
 import SelectData, {ListProps} from "./components/selectData";
 import { goLink } from "@/common/common";
 import styles  from './searchList.module.scss'
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
 import {GetProductListApi} from "@/api/material"
 import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
 import { formatHashTag, formatImgUrl } from "@/common/fotmat";
-import { getFilterData } from "@/common/util";
+import { dataLoadingStatus, getFilterData } from "@/common/util";
 import LoadingCard from "@/components/loadingCard";
 import useLogin from "@/use/useLogin";
 
@@ -53,7 +53,6 @@ export default () => {
     
     //上拉加载数据
     const pageNum = useRef({size: searchField.size, page: searchField.page})
-    const [hasMore, setHasMore] = useState(true)
     const getScrolltolower = () => {
         if(materialList.list.length < materialList.total) {
             pageNum.current.page++
@@ -62,9 +61,9 @@ export default () => {
         }
     }
 
-    //监听获得的数据变化
-    useEffect(() => {
-        (materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
     }, [materialList])
 
     //输入了搜索关键字
@@ -156,12 +155,10 @@ export default () => {
             <View className={styles.list}>
                 <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
                 <View className={styles.scroll}>
-                    {(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
-                    {(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
-                    {(materialList.list.length > 0)&&<InfiniteScroll 
+                    <InfiniteScroll 
                         selfonScrollToLower={() => getScrolltolower()} 
-                        hasMore={hasMore}
                         selfOnScroll={(e) => onscroll(e)}
+                        statusMore={statusMore}
                     >
                         <View className={styles.product_list}>
                             {materialList.list.map(item => {
@@ -181,7 +178,7 @@ export default () => {
                                 </View>
                             })}
                         </View>
-                    </InfiniteScroll>}
+                    </InfiniteScroll>
                 </View>
             </View>
             <Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />