feat: optimize scroll bottom threshold

This commit is contained in:
lyzno1 2025-12-02 16:40:16 +08:00
parent e759243c84
commit cbd36e97ff
No known key found for this signature in database
2 changed files with 6 additions and 2 deletions

View File

@ -27,6 +27,8 @@ import i18n from '@/i18n-config/i18next-config'
import { postMarketplace } from '@/service/base' import { postMarketplace } from '@/service/base'
import type { PluginsFromMarketplaceResponse } from '@/app/components/plugins/types' import type { PluginsFromMarketplaceResponse } from '@/app/components/plugins/types'
const SCROLL_BOTTOM_THRESHOLD = 100
export const useMarketplaceCollectionsAndPlugins = () => { export const useMarketplaceCollectionsAndPlugins = () => {
const [queryParams, setQueryParams] = useState<CollectionsAndPluginsSearchParams>() const [queryParams, setQueryParams] = useState<CollectionsAndPluginsSearchParams>()
const [marketplaceCollectionsOverride, setMarketplaceCollections] = useState<MarketplaceCollection[]>() const [marketplaceCollectionsOverride, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
@ -243,7 +245,7 @@ export const useMarketplaceContainerScroll = (
scrollHeight, scrollHeight,
clientHeight, clientHeight,
} = target } = target
if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0) if (scrollTop + clientHeight >= scrollHeight - SCROLL_BOTTOM_THRESHOLD && scrollTop > 0)
callback() callback()
}, [callback]) }, [callback])

View File

@ -12,6 +12,8 @@ import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils' import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
import { useAllToolProviders } from '@/service/use-tools' import { useAllToolProviders } from '@/service/use-tools'
const SCROLL_BOTTOM_THRESHOLD = 100
export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => { export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
const { data: toolProvidersData, isSuccess } = useAllToolProviders() const { data: toolProvidersData, isSuccess } = useAllToolProviders()
const exclude = useMemo(() => { const exclude = useMemo(() => {
@ -81,7 +83,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
scrollHeight, scrollHeight,
clientHeight, clientHeight,
} = target } = target
if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0) { if (scrollTop + clientHeight >= scrollHeight - SCROLL_BOTTOM_THRESHOLD && scrollTop > 0) {
const searchPluginText = searchPluginTextRef.current const searchPluginText = searchPluginTextRef.current
const filterPluginTags = filterPluginTagsRef.current const filterPluginTags = filterPluginTagsRef.current
if (hasNextPage && (!!searchPluginText || !!filterPluginTags.length)) if (hasNextPage && (!!searchPluginText || !!filterPluginTags.length))