Skip to content

feat(infiniteloading): add refreshDistance props and refactor pull-to-refresh trigger mechanism in taro #3112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: feat_v3.x
Choose a base branch
from
Open

feat(infiniteloading): add refreshDistance props and refactor pull-to-refresh trigger mechanism in taro #3112

Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
75c4617
fix(infiniteloading): 添加 lowerThreshold 参数以修复滚动加载问题
Miles-hxy Mar 21, 2025
490002b
fix(infiniteloading): optimize pull-to-refresh trigger mechanism in taro
Miles-hxy Mar 21, 2025
5d70c28
feat: add refreshDistance props
Miles-hxy Mar 26, 2025
0c67c54
fix: remove useless codes
Miles-hxy Mar 26, 2025
81f8290
fix: update test snapshot
Miles-hxy Mar 26, 2025
040b729
fix: update docs content
Miles-hxy Mar 27, 2025
e188a52
fix: 无法下拉刷新
Miles-hxy Mar 27, 2025
41f19c8
fix: resolve conflicts
Miles-hxy Apr 17, 2025
eecad5a
fix: resolve conflicts
Miles-hxy Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions src/packages/infiniteloading/infiniteloading.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import { useConfig } from '@/packages/configprovider/index.taro'
import { ComponentDefaults } from '@/utils/typings'
import { TaroInfiniteLoadingProps } from '@/types'
import pxTransform from '@/utils/px-transform'
import { mergeProps } from '@/utils/merge-props'

const defaultProps = {
...ComponentDefaults,
type: 'default',
hasMore: true,
threshold: 40,
threshold: 200,
target: '',
pullRefresh: false,
} as TaroInfiniteLoadingProps
Expand All @@ -37,10 +38,7 @@ export const InfiniteLoading: FunctionComponent<
onLoadMore,
onScroll,
...rest
} = {
...defaultProps,
...props,
}
} = mergeProps(defaultProps, props)
const [isInfiniting, setIsInfiniting] = useState(false)
const [topDisScoll, setTopDisScoll] = useState(0)
const refreshTop = useRef<HTMLDivElement>(null)
Expand All @@ -53,13 +51,25 @@ export const InfiniteLoading: FunctionComponent<

const classes = classNames(classPrefix, className, `${classPrefix}-${type}`)

const getRectTaro = async (selector: string): Promise<any> => {
return new Promise((resolve) => {
createSelectorQuery()
.select(selector)
.boundingClientRect()
.exec((res: any) => {
resolve(res[0])
})
})
}

useEffect(() => {
refreshMaxH.current = threshold
const timer = setTimeout(() => {
const timer = setTimeout(async () => {
getScrollHeight()
const rect = await getRectTaro('.nut-infinite-top-tips')
refreshMaxH.current = Math.floor((rect?.height ?? 0) * 2.5)
}, 200)
return () => clearTimeout(timer)
}, [hasMore, isInfiniting, threshold])
}, [hasMore, isInfiniting])

/** 获取需要滚动的距离 */
const getScrollHeight = () => {
Expand Down Expand Up @@ -161,6 +171,7 @@ export const InfiniteLoading: FunctionComponent<
scrollY
id="scroller"
type="list"
lowerThreshold={threshold}
style={{ height: '100%' }}
onScroll={scrollAction}
onScrollToLower={lower}
Expand Down