jasinco/nim
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use OnScroll instead of handler

Browse source
This commit is contained in:
jasinco 2025-06-11 01:41:41 +08:00
parent ec2b8570eb
commit 5f6f8ed5ed
1 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/Fetch.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from "react" import React from "react"
import { FetchPost, MediaPathTrc, SinglePost_t } from "./api" import { FetchPost, MediaPathTrc, SinglePost_t } from "./api"
import { z } from 'zod/v4' import { z } from 'zod/v4'
import { useInfiniteQuery } from "@tanstack/react-query" import { useInfiniteQuery } from "@tanstack/react-query"
@ -7,7 +7,7 @@ import { useInfiniteQuery } from "@tanstack/react-query"
const Single = ({ post }: { post: z.infer<typeof SinglePost_t> }) => { const Single = ({ post }: { post: z.infer<typeof SinglePost_t> }) => {
return ( return (
<div className="w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4"> <div className="w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 snap-start">
<p className="text-gray-800 text-base leading-relaxed">{post.content}</p> <p className="text-gray-800 text-base leading-relaxed">{post.content}</p>
{post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-x-auto gap-3 py-2 -mx-2 px-2 border-t border-gray-200 pt-4"> {post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-x-auto gap-3 py-2 -mx-2 px-2 border-t border-gray-200 pt-4">
{post.enclosure.map((enc, index) => { {post.enclosure.map((enc, index) => {
@ -50,17 +50,15 @@ export const Fetch = () => {
return lastPage !== null && lastPage.length > 0 && (lastPage[lastPage.length - 1].id - 1) > 0 ? lastPage[lastPage.length - 1].id - 1 : undefined return lastPage !== null && lastPage.length > 0 && (lastPage[lastPage.length - 1].id - 1) > 0 ? lastPage[lastPage.length - 1].id - 1 : undefined
}, },
}) })
const observer = new IntersectionObserver((ent) => {
if (ent[0].isIntersecting && ent[0].intersectionRatio > 90) {
hasNextPage && !isFetching && fetchNextPage()
}
})
useEffect(() => {
observer.observe(document.getElementById("skeleton")!)
}, [])
return ( return (
<div className="h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4 overflow-scroll"> <div className="h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4 overflow-scroll snap-y" onScroll={(ev) => {
if (ev.currentTarget.scrollTop / (ev.currentTarget.scrollHeight - ev.currentTarget.clientHeight) >= 0.95) {
if (hasNextPage && !isFetching) {
fetchNextPage()
}
}
}}>
{status === 'pending' && <p>Loading</p>} {status === 'pending' && <p>Loading</p>}
{status === 'error' && <p>Error: {error.message}</p>} {status === 'error' && <p>Error: {error.message}</p>}
{data && data.pages.map((group, i) => ( {data && data.pages.map((group, i) => (
@ -70,7 +68,7 @@ export const Fetch = () => {
))} ))}
</React.Fragment> </React.Fragment>
))} ))}
<div className={"w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 animate-pulse h-[20dvh]" + (hasNextPage ? "" : " hidden")} id="skeleton"> <div className={"w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 animate-pulse mb-10" + (hasNextPage ? "" : " hidden")} id="skeleton">
</div> </div>
{!hasNextPage && <p className="mb-15">見底了</p>} {!hasNextPage && <p className="mb-15">見底了</p>}
</div> </div>