Open sanshuiwang opened 5 years ago
const scrollEvent = event => { // 滚动的高度 const scrollTop = (event.srcElement ? event.srcElement.scrollTop : false) || window.pageYOffset || (event.srcElement ? event.srcElement.body.scrollTop : 0) // 视窗高度 const clientHeight = (event.srcElement && event.srcElement.clientHeight) || document.body.clientHeight // 页面高度 const scrollHeight = (event.srcElement && event.srcElement.scrollHeight) || document.body.scrollHeight // 距离页面底部的高度 const height = scrollHeight - scrollTop - clientHeight return height } const initialState = { page: 1, pageSize: 50 } const reducer = (state, action) => { const payload = reap(action, 'payload', {}) switch (action.type) { case 'update': return { ...state, ...payload } default: throw new Error() } } function Demo(props) { const { getList } = props const [hasMore, setHasMore] = useState(true) const [state, dispatch] = useReducer(reducer, initialState) const [total, setTotal] = useState(0) const [list, setList] = useState([]) const _handleScroll = useCallback( event => { const height = scrollEvent(event) if (hasMore && height <= 100) { const page = state.page + 1 //get new list data dispatch({ type: 'update', payload: { page } }) } }, [hasMore, state.page] ) useEffect(() => { const scrollDom = document.getElementById('layoutContentContainer') scrollDom.addEventListener('scroll', _handleScroll) return () => scrollDom.removeEventListener('scroll', _handleScroll) }, [_handleScroll]) useEffect(() => { const { page, pageSize, searchText } = state getList({ page, pageSize, name: searchText }).then(res => { const code = reap(res, 'code', 0) if (code === 200) { //判断设置还有没有数据可以加载了 setHasMore() //设置获取的数据列表setList(a => a.concat(list)) } }) }, [getList, state]) return ( <React.Fragment> {/** show list map to ui */} </React.Fragment> ) } Demo.propTypes = { getList: PropTypes.func } export default Demo
scrollEvent函数在是计算滚动条距离距离底部的高。 挂载scroll事件监听触发计算当滚动条距离底部小于等于100时进行再次数据加载
react-scroll-down 向下滚动加载数据 - 插件
scrollEvent函数在是计算滚动条距离距离底部的高。 挂载scroll事件监听触发计算当滚动条距离底部小于等于100时进行再次数据加载