实现滚动更多的图片，修改一些细节

slince-zero · May 11, 2024 · bd12395 · bd12395
1 parent d50e201
commit bd12395
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 35 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -27,6 +27,7 @@ export default function ImgContextProvider({
 }) {
   const [imageList, setImageList] = useState<ImageItem[]>([])
   const [searchValue, setSearchValue] = useState('')
+  // 搜索 button 的loading
   const [isLoading, setIsLoading] = useState(false)
   // setImgInfo在left组件中存储图片数据，imgInfo给center组件传递图片数据
   const [imgInfo, setImgInfo] = useState<any>({})
@@ -100,7 +101,6 @@ export default function ImgContextProvider({
       } else {
         setImageList(data) // 直接访问 Unsplash collections/photos 数据在顶层
       }
-      // console.log(imageList,'33')
     } catch (e) {
       console.error(e)
     } finally {
@@ -278,8 +278,6 @@ export default function ImgContextProvider({
     })
   }
 
-
-
   return (
     <ImgContext.Provider
       value={{

diff --git a/src/page/left/index.tsx b/src/page/left/index.tsx
@@ -16,11 +16,13 @@ import {
 } from '@nextui-org/react'
 import { UploadLogo } from './logo'
 import { ImgContext } from '@/context'
-import { Key, useContext } from 'react'
+import { Key, useContext, useEffect, useRef, useState } from 'react'
+import { log } from 'console'
 
 export default function LeftBoard() {
   const {
     imageList,
+    setImageList,
     searchValue,
     setSearchValue,
     isLoading,
@@ -39,6 +41,10 @@ export default function LeftBoard() {
   // 用于AI生成图片的弹出窗
   const { isOpen, onOpen, onClose } = useDisclosure()
 
+  // 滚动到最底部，再次加载图片的 loading
+  const [scrollLoading, setScrollLoading] = useState(false)
+  const scrollRef = useRef<any>(null)
+
   function handleUploadImage(event: any) {
     const file = event.target.files[0]
     if (file) {
@@ -53,6 +59,47 @@ export default function LeftBoard() {
     onOpen()
   }
 
+  // 滚动加载图片
+  async function getScrollRandomImage() {
+    console.log('jinjininij')
+
+    if (scrollLoading) return
+
+    try {
+      setScrollLoading(true)
+      const accessKey = import.meta.env.VITE_PUBLIC_UNSPLASH_API_KEY
+      const endpoint = 'https://api.unsplash.com/photos/random'
+      const queryParam = `&client_id=${accessKey}`
+      const res = await fetch(`${endpoint}?count=20${queryParam}`)
+      const data = await res.json()
+
+      setImageList([...imageList, ...data])
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setScrollLoading(false)
+    }
+  }
+
+  const handleScroll = () => {
+    // 窗口高度 + 用户滚动的距离 >= 整个文档的高度，代表到底了
+    const scrollElement = scrollRef.current
+    if (
+      scrollElement.scrollTop + scrollElement.clientHeight >=
+      scrollElement.scrollHeight
+    ) {
+      getScrollRandomImage()
+    }
+  }
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current
+    if (scrollElement) {
+      scrollElement.addEventListener('scroll', handleScroll)
+      return () => scrollElement.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   return (
     <div className='flex flex-col bg-slate-500 h-screen'>
       <>
@@ -76,37 +123,40 @@ export default function LeftBoard() {
         </Navbar>
       </>
 
-      <ScrollShadow>
-        <div className='flex-grow overflow-y-scroll overflow-x-hidden justify-center flex flex-wrap scrollbar-thin scrollbar-color-auto '>
-          {imageList && imageList?.length == 0 ? (
-            <div className='flex items-center justify-center  transition-transform duration-200 transform hover:scale-105 rounded m-2 cursor-pointer w-5/12 object-cover h-screen'>
-              没有找到图片
-            </div>
-          ) : (
-            imageList &&
-            imageList.map(
-              (item: {
-                id: Key | null | undefined
-                urls: { small: string | undefined }
-                alt_description: string | undefined
-              }) => {
-                return (
-                  <img
-                    key={item.id}
-                    src={item.urls.small}
-                    alt={item.alt_description}
-                    className='transition-transform duration-200 transform hover:scale-105 rounded m-2 cursor-pointer w-5/12 object-cover h-24'
-                    onClick={() => {
-                      setImgInfo(item)
-                      setIsUpload(false)
-                    }}
-                  />
-                )
-              }
-            )
-          )}
-        </div>
-      </ScrollShadow>
+      {/* <ScrollShadow> */}
+      <div
+        ref={scrollRef}
+        id='scroll-photo'
+        className='flex-grow overflow-y-scroll overflow-x-hidden justify-center flex flex-wrap scrollbar-thin scrollbar-color-auto '>
+        {imageList && imageList?.length == 0 ? (
+          <div className='flex items-center justify-center  transition-transform duration-200 transform hover:scale-105 rounded m-2 cursor-pointer w-5/12 object-cover h-screen'>
+            没有找到图片（unsplash 做了限制，每小时只能请求50次API）
+          </div>
+        ) : (
+          imageList &&
+          imageList.map(
+            (item: {
+              id: Key | null | undefined
+              urls: { small: string | undefined }
+              alt_description: string | undefined
+            }) => {
+              return (
+                <img
+                  key={item.id}
+                  src={item.urls.small}
+                  alt={item.alt_description}
+                  className='transition-transform duration-200 transform hover:scale-105 rounded m-2 cursor-pointer w-5/12 object-cover h-24'
+                  onClick={() => {
+                    setImgInfo(item)
+                    setIsUpload(false)
+                  }}
+                />
+              )
+            }
+          )
+        )}
+      </div>
+      {/* </ScrollShadow> */}
 
       <>
         <Navbar className='relative'>