u[datr

src/components/layout/layout.tsx

@@ -98,6 +98,7 @@ export default function Layout(props: {
             
         }
         if (e.nativeEvent){
+            console.log('ssssss')
             const { contentSize, contentOffset, layoutMeasurement } = e.nativeEvent;
             const isAtTheBottom =
                 contentSize.height - contentOffset.y <= layoutMeasurement.height;

src/pages/account/PhotoWall.config.ts

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

src/pages/account/PhotoWall.tsx

@@ -1,10 +1,13 @@
 import { View, Image } from "@tarojs/components";
 import './PhotoWall.scss'
-import Taro, { useRouter } from "@tarojs/taro";
+import Taro, { useReachBottom, useRouter } from "@tarojs/taro";
 import { useEffect, useState } from "react";
 import NewTimePicker from "@/_health/base/new_timepicker";
 import { getAlbums } from "@/services/health";
 import ListFooter from "@/_health/components/list_footer";
+import Layout from "@/components/layout/layout";
+import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
+import NoRecord from "@/_health/components/no_record";
 
 let useRoute;
 let useNavigation;
@@ -20,7 +23,14 @@ export default function PhotoWall() {
     const screenWidth = Taro.getWindowInfo().screenWidth
     const space = 2
     const itemWidth = (screenWidth - space * 2) / 3.0
+
+    const pageSize = 10
+    const [pageIndex, setPageIndex] = useState(1)
+    const [triggered, setTriggered] = useState(false)
     const [list, setList] = useState<any>([])
+    const [total, setTotal] = useState(0)
+    const [loading, setLoading] = useState(false)
+    const [loaded, setLoaded] = useState(false)
 
     let router
     let navigation;
@@ -36,37 +46,108 @@ export default function PhotoWall() {
     }
 
     useEffect(() => {
-        getAlbumsData(router.params.window)
+        refresh()
+        // getAlbumsData(router.params.window)
     }, [])
 
+    function refresh() {
+        getList(1)
+    }
+    useReachBottom(() => {
+        more()
+        // setPageIndex(pageIndex+1)
+        // getHistory()
+    })
+
+    function more() {
+        if (total <= pageIndex*pageSize || loading) {
+            return;
+        }
+        var page = pageIndex + 1
+        getList(page)
+    }
+
 
-    function getAlbumsData(str) {
+    function getList(page) {
+        if (loading) return
+        setPageIndex(page)
+        setLoading(true)
+        if (page == 1)
+            setTriggered(true)
         getAlbums({
-            page: 1,
-            limit: 100,
-            window: str
+            page: page,
+            limit: pageSize,
+            window: router.params.window
         }).then(res => {
             var array: any = [];
+
             (res as any).data.map(item => {
                 array.push(...item.images)
             })
-            setList(array)
+            // setList(array)
+            setLoaded(true)
+            setLoading(false)
+            if (page == 1) {
+                setTotal((res as any).total)
+                setList(array)
+            } else {
+                setList(list.concat(array))
+            }
             // setMedias((res as any).data)
         })
     }
-    return <View style={{ display: 'flex', flexDirection: 'column' }}>
-        <View className="photo_wall">
+
+    function getCountImgs(index) {
+        // var imgs:any = []
+        const start = Math.max(0, index - 10)
+        const end = Math.min(list.length, index + 10 + 1)
+
+        return list.slice(start, end)
+    }
+
+    function detail() {
+        return <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <View className="photo_wall">
+                {
+                    list.map((item, index) => {
+                        return <Image key={index}
+                            src={item + scale}
+                            mode="aspectFill"
+                            onClick={() => {
+                                Taro.previewImage({
+                                    current: item,
+                                    urls: getCountImgs(index)
+                                })
+                            }}
+                            style={{ width: itemWidth, height: itemWidth, backgroundColor: '#f5f5f5', marginBottom: space }} />
+                    })
+                }
+                <View style={{ width: itemWidth, height: itemWidth }} />
+                <View style={{ width: itemWidth, height: itemWidth }} />
+            </View>
             {
-                list.map((item, index) => {
-                    return <Image key={index}
-                        src={item+scale}
-                        mode="aspectFill"
-                        style={{ width: itemWidth, height: itemWidth, backgroundColor: '#f5f5f5', marginBottom: space }} />
-                })
+                loaded && pageIndex*pageSize >= total && <ListFooter noMore={true} />
             }
-            <View style={{ width: itemWidth, height: itemWidth }} />
-            <View style={{ width: itemWidth, height: itemWidth }} />
+
         </View>
-        <ListFooter noMore={true} />
+    }
+
+    return <View style={{ position: 'relative' }}>
+        <Layout children={detail()}
+            // title={router.params.title}
+            isFastSleepTheme={router.params.type == 'time'}
+            secondPage={true}
+            titleColor={'#fff'}
+            title={''}
+            type={TemplateType.flex}
+            refresh={() => { refresh() }}
+            triggered={triggered}
+            more={() => { more() }}
+            titleShowStyle={NaviBarTitleShowType.scrollToShow}
+        />
+        {
+            loaded && list.length == 0 && <NoRecord />
+        }
+
     </View>
 }