优化滚动

src/pages/classList/index.tsx

@@ -4,13 +4,13 @@ import Search from '@/components/search'
 import Product from '@/components/product'
 import InfiniteScroll from '@/components/infiniteScroll'
 import styles  from './index.module.scss'
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Filter from "@/components/filter";
 import SortBtn from "@/components/sortBtn";
 import SelectData, {ListProps} from "../searchList/components/selectData";
 import {GetProductListApi} from '@/api/material'
 import { useRouter } from "@tarojs/taro";
-import { getFilterData } from "@/common/util";
+import { dataLoadingStatus, getFilterData } from "@/common/util";
 import LoadingCard from "@/components/loadingCard";
 
 export default () => {
@@ -56,9 +56,9 @@ export default () => {
         }
     }
 
-    //监听获得的数据变化
-    useEffect(() => {
-        (categoryList.list.length < categoryList.total)?setHasMore(true):setHasMore(false)
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:categoryList.list, total: categoryList.total, status: state.loading})
     }, [categoryList])
 
     //获取筛选条件
@@ -118,11 +118,9 @@ export default () => {
                 </View>
             </View>
             <View className={styles.list}>
-                {(categoryList.list.length == 0&&state.loading)&&<LoadingCard/>}
-                {(categoryList.list.length == 0 && !state.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
-                {(categoryList.list.length > 0)&&<InfiniteScroll selfonScrollToLower={() => getScrolltolower()} hasMore={hasMore}>
+                <InfiniteScroll selfonScrollToLower={() => getScrolltolower()} statusMore={statusMore}>
                     <Product desStatus={false} productList={categoryList.list}/>
-                </InfiniteScroll>}
+                </InfiniteScroll>
             </View>
             <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
         </View>