Umi中使用PullToRefresh下拉刷新,InfiniteScroll上拉加载，FloatButton回到顶部

视频效果

上拉加载，下拉刷新，回到顶部

PullToRefresh下拉刷新

// 原始数据
	const list: any = [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'E' }, { name: 'F' }, { name: 'G' }, { name: 'H' }, { name: 'I' }, { name: 'J' }, { name: 'K' }, { name: 'L' }, { name: 'M' }, { name: 'N' }, { name: 'O' }, { name: 'P' }, { name: 'Q' }, { name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 }, { name: 2 }, { name: 6 }, { name: 7 }, { name: 8 }, { name: 9 }, { name: 10 }, { name: 11 }, { name: 12 }]
	// 拷贝一份数据做初始化数据
	const data = list
	// 数据进行分页,首页从0开始
	const [page, setPage] = useState(0)
	// 初始数据
	const [rest, setRest] = useState(data.slice(0, 12))
	// InfiniteScroll中是否还有更多内容
	const [hasMore, setHasMore] = useState(true)
	// 触发加载事件的滚动触底距离阈值，单位为像素，默认为250
	const [threshold, setthreshold] = useState(300)
	// 加载更多的回调函数
	async function loadMore() {
		// 拷贝一份数据
		const res = list
		// 触底后页数+1
		const pages = page + 1
		// 每次分页后得到的数据
		const append = res.slice(12 * pages, pages * 12 + 12)
		// 如果超出可分页数返回
		if (pages > Math.ceil(res.length / 12) - 1) {
			return false
		}
		// 更新页数
		setPage(pages)
		// 更新滚动触底距离阈值
		setthreshold(threshold + 300)
		// 设置定时器
		let timer = setInterval(() => {
			// 如何有数据追加数据
			setHasMore(append.length > 0)
			// 更新数据
			setRest((val:any) => [...val, ...append])
			// 销毁定时器
			clearInterval(timer)
		}, 3000)
		// 设置无数据
		setHasMore(false)
	}

InfiniteScroll上拉加载，FloatButton回到顶部

<div style={{ backgroundColor: 'pink', height: '100%', width: '100vw', marginBottom: '50px' }}>
			{/* 下拉刷新 */}
			<PullToRefresh
				onRefresh={async () => {
					// 设置等待时间
					await sleep(1000)
					// 拷贝一份数据
					const data = list
					// 将页数重新设置为0
					setPage(0)
					// 刷新后的初始化数据
					const ret: any = data.slice(0, 12)
					// 更新数据
					setRest([...ret])
				}}
			>
				{/* 长列表 数据渲染 */}
				<List>
					{rest.map((item:any, index:any) => (
						<List.Item key={index} style={{ height: '60px' }}>{item.name}</List.Item>
					))}
				</List>
				{/* 回到顶部 */}
				<FloatButton.BackTop />
			</PullToRefresh>
			{/* 上拉加载 */}
			<InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={threshold}>
				{!hasMore ?
					<div>
						<span>Loading</span>
						<DotLoading />
					</div>
					:
					<span>--- 我是有底线的 ---</span>
				}
			</InfiniteScroll>
		</div>