update

src/_health/pages/move.tsx

@@ -716,7 +716,7 @@ export default function Move() {
         {
             list.length > 0 && <View className="history">
                 <View className="history_header">
-                    <Text className="h34 bold">Recent</Text>
+                    <Text className="h50 bold">Recent</Text>
                     <View className="border_footer_line" />
                 </View>
                 {

src/features/health/MainCard.scss

@@ -143,14 +143,6 @@
     line-height: 42px;
 }
 
-.today{
-    margin-top: 24px;
-    font-weight: bold;
-    font-size: 48px;
-    color: #000;
-
-}
-
 .main_date{
     margin-top: 12px;
     margin-bottom: 60px;

src/features/health/MainHistory.tsx

@@ -213,7 +213,7 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
         }} /> */}
         {
             (list.length >= 0 || health.mode == 'EAT') && <View className="recent">
-                <Text className="h34 bold">Recent</Text>
+                <Text className="h50 bold">Recent</Text>
                 {
                     health.mode == 'EAT' && <View onClick={() => {
                         jumpPage('/_health/pages/archive')

src/features/health/MainSwiper.tsx

@@ -186,7 +186,7 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
     }
 
     return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center' }}>
-        <Text className="today">{t('health.today')}</Text>
+        <Text className="h50 bold" style={{marginTop:rpxToPx(24)}}>{t('health.today')}</Text>
         <Text className="main_date g01" >{global.language == 'en' ? dayjs().format('dddd, MMM D') : dayjs().format('MMMD日 dddd')}</Text>
         {/* <View className="tabs">
             <View className="tab_item" style={{ backgroundColor: current != 0 ? '#B2B2B2' : isDay() ? MainColorType.day : MainColorType.night }} onClick={() => tapScroll(0)}></View>

src/pages/account/Album.config.ts

@@ -1,8 +1,9 @@
 export default definePageConfig({
-    usingComponents:{
-      // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
-      // 'demo':'../../components/demo'
-    },
-    "navigationBarTitleText":"Album",
-    "navigationBarBackgroundColor":"#f5f5f5"
-  })
+  usingComponents: {
+    // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+    // 'demo':'../../components/demo'
+  },
+  "disableScroll": true,
+  "navigationBarTitleText": "Album",
+  "navigationBarBackgroundColor": "#f5f5f5"
+})

src/pages/account/Album.tsx

@@ -11,24 +11,35 @@ import { MainColorType } from "@/context/themes/color";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
 import dayjs from "dayjs";
 import Taro from "@tarojs/taro";
+import StickyDateList from "@/_health/components/sticky_date_list";
 
 export default function Album() {
 
     const [medias, setMedias] = useState<any>([])
     const [window, setWindow] = useState('')
     const [stat, setStat] = useState<any>(null)
+    const [isPulling, setIsPulling] = useState(false)
+    const [itemLayouts, setItemLayouts] = useState<any>([])
+    const [showDate, setShowDate] = useState(false)
+    const [date, setDate] = useState('')
 
     useEffect(() => {
         getAlbumsData('')
     }, [])
 
     function getAlbumsData(str) {
+        setIsPulling(true)
         getAlbums({
             page: 1,
             limit: 50,
             window: str
         }).then(res => {
             setMedias((res as any).data)
+            setIsPulling(false)
+
+            setTimeout(() => {
+                measureItemLayouts()
+            }, 1000)
         })
 
         getAlbumsStat().then(res => {
@@ -44,7 +55,7 @@ export default function Album() {
             var now = dayjs().format('YYYYMM')
             if (currentDate != now) {
                 showDate = true
-                dateStr = currentDate.substring(0,4)+'年'+currentDate.substring(4,6)+'月'
+                dateStr = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
             }
         }
         else {
@@ -53,7 +64,7 @@ export default function Album() {
             if (currentDate != now) {
                 showDate = true
                 // dateStr = currentDate
-                dateStr = currentDate.substring(0,4)+'年'+currentDate.substring(4,6)+'月'
+                dateStr = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
             }
         }
         if (showDate) {
@@ -70,79 +81,126 @@ export default function Album() {
         return <View />
     }
 
+    function measureItemLayouts() {
+        const query = Taro.createSelectorQuery()
+        medias.forEach((item, index) => {
+            query.select(`#history-${index}`).boundingClientRect()
+        });
+        query.exec((res) => {
+            var layouts: any = []
+            res.forEach((rect, index) => {
+                if (rect) {
+                    layouts[index] = rect.top
+                }
+            });
+            setItemLayouts(layouts)
+        })
+    }
 
-    return <View style={{ display: 'flex', flexDirection: 'column' }}>
-        <NewHeader type={NewHeaderType.left} title="Album" />
-        {stat && <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(72) }} scrollX enableFlex showScrollbar={false}>
-            <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
-            <NewButton type={NewButtonType.img} onClick={() => {
-                setWindow('')
-                getAlbumsData('')
-            }}>
-                <View className="streak_toolbar_btn"
-                    style={{ backgroundColor: window == '' ? '#B2B2B21A' : 'transparent' }}
-                >
-                    <Text className={window == '' ? 'bold h30' : 'h30'}
-                        style={{ color: window == '' ? '#000' : MainColorType.g01 }}>全部 <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{stat.total}</Text></Text>
-                </View>
-            </NewButton>
+    function onScroll(e) {
+        var top = e.detail.scrollTop
+        if (itemLayouts.length > 0) {
+            var i = -1
+            var date = ''
+            medias.forEach((item, index) => {
+                if (top >= itemLayouts[index] - 50) {
+                    i = index
+                    var currentDate = (medias[index].date + '').substring(0, 6)
 
-            {
-                stat.items.map((item, index) => {
-                    return <View key={index}>
-                        <NewButton type={NewButtonType.img} onClick={() => {
-                            setWindow(item.window)
-                            getAlbumsData(item.window)
-                        }}>
-                            <View className="streak_toolbar_btn"
-                                style={{ backgroundColor: window == item.window ? getThemeColor(item.window) + '1A' : 'transparent' }}
-                            >
-                                <Text className={window == item.window ? 'bold h30' : 'h30'}
-                                    style={{ color: window == item.window ? getThemeColor(item.window) : MainColorType.g01 }}>{item.window} <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{item.image_count}</Text></Text>
-                            </View>
-                        </NewButton>
+                    date = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
+                }
+            })
+
+            setShowDate(i != -1)
+            setDate(date)
+        }
+        else {
+            setShowDate(false)
+            setDate('')
+        }
+    }
+
+    return <StickyDateList onRefresherRefresh={() => {
+        setIsPulling(true)
+        getAlbumsData(window)
+    }} isPulling={isPulling}
+        onScroll={onScroll}
+        showDate={showDate}
+        date={date}
+    >
+        <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <NewHeader type={NewHeaderType.left} title="Album" />
+            {stat && <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(72) }} scrollX enableFlex showScrollbar={false}>
+                <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
+                <NewButton type={NewButtonType.img} onClick={() => {
+                    setWindow('')
+                    getAlbumsData('')
+                }}>
+                    <View className="streak_toolbar_btn"
+                        style={{ backgroundColor: window == '' ? '#B2B2B21A' : 'transparent' }}
+                    >
+                        <Text className={window == '' ? 'bold h30' : 'h30'}
+                            style={{ color: window == '' ? '#000' : MainColorType.g01 }}>全部 <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{stat.total}</Text></Text>
                     </View>
-                })
-            }
-            <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
-        </ScrollView>}
-        <View style={{ height: rpxToPx(36) }} />
+                </NewButton>
 
-        <View className="photo_wall" onClick={() => {
-            jumpPage('/pages/account/PhotoWall?window=' + window)
-        }}>
-            <View style={{ flex: 1 }} />
-            <Text className="photo_wall_text">Photo Wall</Text>
-            <Image className="photo_wall_arrow" src={require('@assets/_health/arrow2.png')} />
-            <View className="album_line" />
-        </View>
-        {
-            medias.map((item, index) => {
-                return <View key={index} style={{ display: 'flex', flexDirection: 'column' }}>
-                    {
-                        historyMonth(index, index - 1)
-                    }
-                    <View className="history_item2" >
+                {
+                    stat.items.map((item, index) => {
+                        return <View key={index}>
+                            <NewButton type={NewButtonType.img} onClick={() => {
+                                setWindow(item.window)
+                                getAlbumsData(item.window)
+                            }}>
+                                <View className="streak_toolbar_btn"
+                                    style={{ backgroundColor: window == item.window ? getThemeColor(item.window) + '1A' : 'transparent' }}
+                                >
+                                    <Text className={window == item.window ? 'bold h30' : 'h30'}
+                                        style={{ color: window == item.window ? getThemeColor(item.window) : MainColorType.g01 }}>{item.window} <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{item.image_count}</Text></Text>
+                                </View>
+                            </NewButton>
+                        </View>
+                    })
+                }
+                <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
+            </ScrollView>}
+            <View style={{ height: rpxToPx(36) }} />
+
+            <View className="photo_wall" onClick={() => {
+                jumpPage('/pages/account/PhotoWall?window=' + window)
+            }}>
+                <View style={{ flex: 1 }} />
+                <Text className="photo_wall_text">Photo Wall</Text>
+                <Image className="photo_wall_arrow" src={require('@assets/_health/arrow2.png')} />
+                <View className="album_line" />
+            </View>
+            {
+                medias.map((item, index) => {
+                    return <View key={index} id={`history-${index}`} style={{ display: 'flex', flexDirection: 'column' }}>
+                        {
+                            historyMonth(index, index - 1)
+                        }
+                        <View className="history_item2" >
 
-                        <Text className="history_date">{(item.date + '').substring(6, 9)}</Text>
-                        <View style={{display:'flex',flex:1}}>
-                            <View className="media" style={{ marginRight: item.images.length == 4 ? 80 : 0 }}>
-                                {
-                                    item.images.map((photo, i) => {
-                                        return <Image onClick={()=>{
-                                            Taro.previewImage({
-                                                current:photo,
-                                                urls:item.images
-                                            })
-                                        }} mode="aspectFill" src={photo} key={i * 900} className="media_item" />
-                                    })
-                                }
+                            <Text className="history_date">{(item.date + '').substring(6, 9)}</Text>
+                            <View style={{ display: 'flex', flex: 1 }}>
+                                <View className="media" style={{ marginRight: item.images.length == 4 ? 80 : 0 }}>
+                                    {
+                                        item.images.map((photo, i) => {
+                                            return <Image onClick={() => {
+                                                Taro.previewImage({
+                                                    current: photo,
+                                                    urls: item.images
+                                                })
+                                            }} mode="aspectFill" src={photo} key={i * 900} className="media_item" />
+                                        })
+                                    }
+                                </View>
                             </View>
+                            <View className="border_footer_line" />
                         </View>
-                        <View className="border_footer_line" />
                     </View>
-                </View>
-            })
-        }
-    </View>
+                })
+            }
+        </View>
+    </StickyDateList>
 }