【react】InfiniteScroll 滚动组件

在data.d.ts中定义父组件所需要传的值

import { ReactNode } from 'react'
type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
interface InfiniteProps {isNavBar?: boolean // 是否有头部TopNoData?: number // 无数据的时候图片距离顶部的距离InitialNoData?: {img: string // 初始进入无数据的图片content: ReactNode | string // 内容区域 可以是文本或者reactNode} // 初始进入无数据传入的searchNoData?: {img: string // 搜索无数据的imgcontent: ReactNode | string // 内容区域 可以是文本或者reactNode} // 搜索无数据的scrollMap: {isNull?: booleanlastPage: boolean | undefinedisLoading: boolean | undefinedsetSize: (num: number) => voidsize: number | undefinedrefresh: (obj?: object) => void} // 传入的滚动组件所需要的值, 这是一个map调用request的时候返回的scrollMapskeletionData?: string // 传入的列表骨架屏图片TopDistance?: number // 滚动组件距离顶部的距离isBottomPadding?: boolean //是否给底部没有数据提示加paddingpageSize?: number // 接受传入的每页的数据量data: Array<[]> // 接收传入的每页的数据height?: number | string // 滚动组件高度 可以传入可以不传backgroundColor?: string | '#fff' // 传入的背景颜色isScrollRecovery?: boolean // 是否执行滚动位置恢复childrenContent?: ReactNode // 内容// eslint-disable-next-line @typescript-eslint/ban-typeshandlerRefresh?: () => void // 触发刷新时的处理函数(可以不用)pullingText?: ReactNode // 下拉的提示文案canReleaseText?: ReactNode // 释放的提示文案refreshingText?: ReactNode // 刷新时的提示文案completeText?: ReactNode // 完成时的提示文案completeDelay?: number // 完成后延迟消失的时间，单位为 msheadHeight?: number // 头部提示内容区的高度，单位为 pxthreshold?: number // 触发刷新需要下拉多少距离，单位为 pxdropText?: (status: PullStatus) => ReactNode // 根据下拉状态，自定义下拉提示文案
}
export { InfiniteProps }

在index.tsx中实现此功能

import React, { useRef, useEffect } from 'react'
import { Main } from './styled'
import { InfiniteProps } from './data'
import { Loading, PullToRefresh, Image } from 'antd-mobile'
import { useLocation } from 'react-router-dom'
import { useInViewport, useSafeState, useUpdateEffect } from 'ahooks'
import { chunk } from 'lodash-es'
// 列表进入详情，从详情返回到列表保留滚动条位置
import { useScrollToRestore } from '@/hooks/scrollToRestore'
import EmptyState from '../EmptyState' // 空状态组件引入const InfiniteScroll: React.FC<InfiniteProps> = (props) => {const {height = 0,data,pageSize = 15,backgroundColor='#ffffff',isNavBar = false,scrollMap,skeletionData = '',TopDistance,isBottomPadding= false,childrenContent,isScrollRecovery= true,handlerRefresh,pullingText = '下拉刷新',canReleaseText = '释放立即刷新',refreshingText = '加载中……',completeText = '刷新成功',completeDelay = 500,headHeight = 40,threshold = 60,TopNoData, // 无数据的时候图片距离顶部的距离InitialNoData, // 初始进入无数据的状态searchNoData, // 搜索无数据的状态} = propsconst {refresh,lastPage,size = 0,isLoading,setSize,isNull,} = scrollMap// 判断是否是显示加载中const [isDisplayLoad, setIsDisplayLoad] = useSafeState(false)// 判断是否是最后一条数据const [isLastData, setIsLastData] = useSafeState(false)// 加载中的refconst loadingRef = useRef<HTMLDivElement>(null)// 监听加载中是否显示到可视窗口const [inViewport] = useInViewport(loadingRef)// 获取当前路由地址const { pathname } = useLocation()// 是否显示出来加载中 如果是true 则加载下一页useUpdateEffect(() => {if (inViewport && setSize) {setSize(size + 1)}}, [inViewport])// 设置是否显示加载中以及判断是否是最后一页useEffect(() => {const displayLoad = data?.length === 0const initData = chunk(data, pageSize)const lastData = displayLoad || (initData && initData[initData.length - 1]?.length < pageSize)setIsLastData(!dataLastPage || lastData )setIsDisplayLoad(displayLoad)}, [data, dataLastPage])// 调用滚动位置恢复hooksuseScrollToRestore(isScroll, 'roolDom')// 底部渲染const handlerBottom = () => {let content = ''if (isDisplayLoad) {content = ''} else if (!isLastData && isDisplayLoad) {content = ''} else {content = '没有更多了~'}return content}return (<><InfiniteMainisNavBar={isNavBar || import.meta.env.MODE.includes('lcoal') }TopDistance={TopDistance}isAddPadding={isBottomPadding}dataNall={data.length === 0}className="roolDom"height={height}backgroundColor={backgroundColor}>{!isLoading ? (<>{/* 初始进来页面无数据 */}{InitialNoData && !isNull && data.length === 0 && (<EmptyStateisNavBar={isNavBar}defaultImg={InitialNoData?.img}top={top || 0}title={InitialNoData?.content|| ''}/>)}{/* 页面有数据 搜索无数据 */}{searchNoData && isNull && data.length === 0 && (<EmptyStateisNavBar={isNavBar}defaultImg={searchNoData?.img}top={TopNoData || 0}title={searchNoData?.content || ''}/>)}<PullToRefreshonRefresh={async () => {await (handlerRefresh && handlerRefresh())refresh && refresh()sessionStorage.removeItem(pathname)}}pullingText={pullingText}canReleaseText={canReleaseText}refreshingText={refreshingText}completeText={completeText}completeDelay={completeDelay}headHeight={headHeight}threshold={threshold}><div className="mainBox">{childrenContent}</div>{!isLastData ? (<div ref={isLoadingRef} className="base_load"><div>加载中</div><Loading /></div>) : (handlerBottom() && <div className="botm">{handlerBottom()}</div>)}</PullToRefresh></>) : (skeletionData && <Image src={skeletionData} />)}</InfiniteMain></>)
}
export default React.memo(InfiniteScroll)

在styled.ts中实现样式

import styled from 'ns-styled'
const InfiniteMain = styled.div<{TopDistance?: numberisAddPadding?: booleanheight: number | stringbackgroundColor?: string | '#fff'dataNall: booleanisNavBar: boolean
}>`background: ${(p) => p.dataNall && '#f5f5f5'};&::-webkit-scrollbar {display: none;}.adm-pull-to-refresh-head-content {font-size: 14px;}.base_load {height: 36px;background: #f7f7f7;font-size: 14px;display: flex;align-items: center;justify-content: center;div {display: inline-block;}}.botm {font-size: 12px;color: #8c8c8c;text-align: center;height: 24px;line-height: 24px;margin-top: 32px;margin-bottom: ${(props) => props.isAddPadding && '56px'};}height: ${(p) =>p.TopDistance? `calc(100vh - ${(p.TopDistance || 0) + (p.isNavBar ? 52 : 0)}px)`: Number(p.height)? `${p.height}px`: p.height};overflow: auto;-webkit-overflow-scrolling: touch;background: ${(props) => props.backgroundColor};
`
export { InfiniteMain }

【react】InfiniteScroll 滚动组件相关推荐

react 数字滚动组件
效果图给数字做了逗号符分割,更符合国际大额数字的浏览效果. /** @Descripttion:* @version:* @Author: dal* @Date: 2021-11-02 16:48: ...
解决Element的 InfiniteScroll 无限滚动组件报错
问题: 使用Element的 InfiniteScroll 无限滚动组件,代码正常,但是控制台还是会有报错: vue.esm.js?efeb:628 [Vue warn]: Error in dire ...
使用Element的 InfiniteScroll 无限滚动组件报错
一.问题描述在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationOb ...
【React】手写虚拟滚动组件（二）可自动获取不定高度的虚拟滚动组件
前言上次那篇写的虚拟滚动后来使用发现在某些情况并不是特别好用,并且只支持固定高度.我看了下umihook的虚拟滚动,发现也不是很好用,它支持手动设定每个元素高度,但也不能支持不定高度,而且限定更多了 ...
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案
ElementUI 官网 InfiniteScroll 使用:https://element.eleme.cn/#/zh-CN/component/infiniteScroll 首先先叙述一下需求,说 ...
数字滚动组件（react）
基于react实现一个数字滚动组件(vue也一样,逻辑相同) 直接上代码 1.number-roll.tsx interface NumberRollProps {value: number; } c ...
React Native 下载组件以及npm常用命令
一.React Native 下载组件: RN的组件都是需要从网上下载的.正常来说,我们通过npm start打开服务器之后,直接用npm下载即可.常用的组件,例如按钮,滚动等,都是可以直接下载的.下 ...
react 实现滚动加载_在React中实现平滑滚动
react 实现滚动加载 Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being ...
移动跨平台框架React Native状态栏组件StatusBar【16】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...

【react】InfiniteScroll 滚动组件

【react】InfiniteScroll 滚动组件相关推荐

最新文章

热门文章