pref(收藏夹): 显示空状态

src/components/empty/index.module.scss

@@ -0,0 +1,20 @@
+.mainBox {
+    height: calc(100vh - 200px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .pic {
+        width: 522px;
+        height: 322px; 
+        // opacity: 0.3;
+        margin-bottom: 24px;
+    }
+
+    .text {
+        font-size: 26px;
+        color: $color_font_two;
+        font-weight: 400;
+    }
+}

src/components/empty/index.tsx

@@ -0,0 +1,22 @@
+import { Image, View } from '@tarojs/components'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from '../empty/index.module.scss'
+
+interface PropsObj {
+  picUrl?: string
+  text?: string
+}
+const Empty = (pros: PropsObj) => {
+  const {
+    picUrl = '',
+    text = '无搜索历史',
+  } = pros
+
+  return (
+    <View className={styles.mainBox}>
+      <Image className={styles.pic} mode="aspectFill" lazyLoad src={picUrl}></Image>
+      <View className={styles.text}>{text}</View>
+    </View>
+  )
+}
+export default memo(Empty)

src/components/infiniteScroll/index.tsx

@@ -4,6 +4,8 @@ import { memo, useMemo, useState } from 'react'
 import LoadingCard from '../loadingCard'
 import style from './index.module.scss'
 import DotLoading from '@/components/dotLoading'
+import Empty from '../empty'
+import { SEARCH_EMPTY_IMAGE } from '@/common/constant'
 
 export type StatusParam = 0|1|2|3
 
@@ -22,8 +24,9 @@ interface Params {
   selfOnRefresherRestore?: () => void
   selfOnRefresherAbort?: () => void
   paddingBottom?: number
-  refresherTriggered?: true|false
-  refresherEnabled?: true|false
+  refresherTriggered?: boolean
+  refresherEnabled?: boolean
+  emptySlot?: React.ReactNode
 }
 const InfiniteScroll = ({
   styleObj,
@@ -34,7 +37,7 @@ const InfiniteScroll = ({
   selfOnRefresherRefresh,
   selfOnRefresherRestore,
   selfOnRefresherAbort,
-  hasMore = true,
+  emptySlot,
   children,
   lowerThresholdNum = 5,
   paddingBottom = 0,
@@ -110,7 +113,7 @@ const InfiniteScroll = ({
             </View>
             }
             {(statusMore == 0) && <LoadingCard />}
-            {(statusMore == 1) && <LoadingCard loadingIcon={false} title="暂无数据" />}
+            {statusMore == 1 && (emptySlot || <Empty picUrl={SEARCH_EMPTY_IMAGE} text="暂无数据" />)}
           </>}
 
         <View className="common_safe_area_y"></View>