update

src/_health/pages/archive.tsx

@@ -12,7 +12,10 @@ import { getThemeColor } from "@/features/health/hooks/health_hooks";
 import StatusIndicator, { StatusType } from "../base/status_indicator";
 import { MainColorType } from "@/context/themes/color";
 import { IconCheck, IconCircle } from "@/components/basic/Icons";
+import StickyDateList from "@/_health/components/sticky_date_list";
+import dayjs from "dayjs";
 
+let myScrollTop = 0
 export default function Archive() {
     const [list, setList] = useState<any>([])
     const [page, setPage] = useState(1)
@@ -22,12 +25,25 @@ export default function Archive() {
     const health = useSelector((state: any) => state.health);
     const [showNote, setShowNote] = useState(false)
     const [checked, setChecked] = useState(false)
+    const [isPulling, setIsPulling] = useState(false)
+    const [loading, setLoading] = useState(false)
 
+    const [itemLayouts, setItemLayouts] = useState<any>([])
+    const [showDate, setShowDate] = useState(false)
+    const [date, setDate] = useState('')
 
     global.refreshArchiveHistory = () => {
         refresh()
     }
 
+    useEffect(() => {
+        if (list.length > 0) {
+            setTimeout(() => {
+                measureItemLayouts()
+            }, 300)
+        }
+    }, [list])
+
 
     useEffect(() => {
         loadData(1)
@@ -39,7 +55,6 @@ export default function Archive() {
             key: 'hideArchiveNote',
             success(result) {
             }, fail: function (err) {
-                debugger
                 setShowNote(true)
             }
         })
@@ -47,11 +62,13 @@ export default function Archive() {
     }, [])
 
     function refresh() {
+        if (loading) return;
         loadData(1)
         setPage(1)
     }
 
     function more() {
+        if (loading) return;
         var index = page;
         index++;
         setPage(index)
@@ -60,6 +77,7 @@ export default function Archive() {
 
     function loadData(index: number) {
         // return
+        setLoading(true)
         records({
             window: health.mode,
             limit: 10,
@@ -67,6 +85,8 @@ export default function Archive() {
             archived: true
         }).then(res => {
             setLoaded(true)
+            setIsPulling(false)
+            setLoading(false)
 
             var array = (res as any).data
 
@@ -165,9 +185,50 @@ export default function Archive() {
             }
 
 
+        }).catch(e => {
+            setLoading(false)
+        })
+    }
+
+    function measureItemLayouts() {
+        const query = Taro.createSelectorQuery()
+        list.forEach((item, index) => {
+            query.select(`#history-${index}`).boundingClientRect()
+        });
+        query.exec((res) => {
+            var layouts: any = []
+            res.forEach((rect, index) => {
+                if (rect) {
+                    layouts[index] = rect.top + myScrollTop
+                }
+            });
+            setItemLayouts(layouts)
         })
     }
 
+    function onScroll(e) {
+        var top = e.detail.scrollTop
+        myScrollTop = top
+        if (itemLayouts.length > 0) {
+            var i = -1
+            var date = ''
+            list.forEach((item, index) => {
+                if (top >= itemLayouts[index] - 50) {
+                    i = index
+                    date = dayjs(item.window_range.start_timestamp).format('YYYY年M月')
+                }
+            })
+
+            setShowDate(i != -1)
+            setDate(date)
+        }
+        else {
+            setShowDate(false)
+            setDate('')
+
+        }
+    }
+
     function note() {
         if (!showNote) return <View />
         return <View style={{
@@ -228,19 +289,44 @@ export default function Archive() {
 
     if (!loaded)
         return <View />
-    return <View>
-        {
-            note()
-        }
-        {
-            list.map((item, index) => {
-                return <View ref={refDemo} id="demo1" key={index}>
-                    <HistoryItem type="archive" data={item} preData={index == 0 ? null : list[index - 1]} index={index} isArchived={true} mode={health.mode} onClick={() => {
-                        jumpPage('/_health/pages/moment_detail')
-                    }} refresh={refresh} />
-                </View>
-            })
-        }
-        <ListFooter noMore={(list.length > 0) && (total == list.length)} />
-    </View>
+    return <StickyDateList
+        isPulling={isPulling}
+        showDate={showDate}
+        date={date}
+        onRefresherRefresh={() => {
+            refresh()
+            setIsPulling(true)
+        }}
+        loadMore={() => {
+            more()
+        }}
+        onScroll={e => {
+            onScroll(e)
+            // if (e.detail.scrollTop > 240) {
+            //     dispatch(setTitle(pageTitle()))
+            // }
+            // else {
+            //     dispatch(setTitle(''))
+            // }
+            // if (historyRef) {
+            //     (historyRef.current as any).onScroll(e)
+            // }
+        }}
+    >
+        <View style={{ display: 'flex', flexDirection: 'column' }}>
+            {
+                note()
+            }
+            {
+                list.map((item, index) => {
+                    return <View id={`history-${index}`} key={index}>
+                        <HistoryItem type="archive" data={item} preData={index == 0 ? null : list[index - 1]} index={index} isArchived={true} mode={health.mode} onClick={() => {
+                            jumpPage('/_health/pages/moment_detail')
+                        }} refresh={refresh} />
+                    </View>
+                })
+            }
+            <ListFooter noMore={(list.length > 0) && (total == list.length)} />
+        </View>
+    </StickyDateList>
 }