原生Js实现上拉加载，下拉刷新

实现效果

原生js上拉加载，下拉刷新

实现代码

import React, { useEffect, useState } from 'react'
import { FloatButton } from 'antd';
export default function shop() {
	useEffect(() => {
		//监听页面的滚动
		window.onscroll = function () {
			//scrollTop是滚动条滚动时，距离顶部的距离
			//为了保证兼容性，这里取两个值，哪个有值取哪一个
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			//windowHeight是可视区的高度
			let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
			//scrollHeight是滚动条的总高度
			let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

			// 触底加载
			//滚动条到底部的条件
			if ((scrollTop + windowHeight) >= scrollHeight) {
				//到了这个就可以进行业务逻辑加载后台数据了
				var pages = page + 1
				if (pages > Math.ceil(list.length / 12) - 1) {
					return false
				}
				setPage(pages)
				let timer = setInterval(() => {
					const res = data.slice(pages * 12, pages * 12 + 12)
					setisshow(res.length > 0)
					setRest([...rest, ...res])
					clearInterval(timer)
				}, 3000)
				setisshow(false)
			}
		}
		// 获取dom节点
		var _element: any = document.getElementById('refreshContainer')
		var _refreshText: any = document.querySelector('.refreshText')
		// 监听touchstart
		_element.addEventListener('touchstart', function (e:any) {
			_startPos = e.touches[0].pageY; // 记录初始位置
			_element.style.position = 'relative';
			_element.style.transition = 'transform 0s';
		}, false);
		// 监听touchmove
		_element.addEventListener('touchmove', function (e:any) {
			// e.touches[0].pageY 当前位置
			_transitionHeight = e.touches[0].pageY - _startPos; // 记录差值

			if (_transitionHeight > 0 && _transitionHeight < 60) {
				_refreshText.innerText = '下拉刷新';
				_element.style.transform = 'translateY(' + _transitionHeight + 'px)';

				if (_transitionHeight > 100) {
					_refreshText.innerText = '释放更新';
				}
			}
		}, false);
		// 监听touchend
		_element.addEventListener('touchend', function (e) {
			_element.style.transition = 'transform 0.5s ease 1s';
			_element.style.transform = 'translateY(0px)';
			_refreshText.innerText = '更新中...';
			// 设置定时器
			let timer = setInterval(() => {
				// 拷贝一份数据
				const data = list
				// 将页数重新设置为0
				setPage(0)
				// 刷新后的初始化数据
				const ret: any = data.slice(0, 12)
				// 更新数据
				setRest([...ret])
				setStartPos(0)
				// 销毁定时器
				clearInterval(timer)
				_refreshText.innerText = '';
			}, 3000)
		}, false);
	})
	// 原始数据
	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
	// 数据分页
	const [page, setPage] = useState(0)
	// 初始化数据
	const [rest, setRest] = useState(data.slice(page, 12))
	// 是否显示loading
	const [isshow, setisshow] = useState(false)
	// 下拉初始的值
	var [_startPos, setStartPos]: any = useState(0)
	// 下拉移动的距离
	var _transitionHeight: any = 0;
	return (
		<div style={{ marginBottom: '50px', position: 'relative' }}>
			<p className='refreshText' style={{ backgroundColor: 'green', margin: '0', display: 'flex', justifyContent: 'center' }}></p>
			<div id='refreshContainer' style={{ marginTop: '0' }}>
				<dl>
					{
						rest.map((item: any, index: any) => {
							return <dd key={index} style={{ height: '50px' }}>{item.name}</dd>
						})
					}
				</dl>
				{isshow ?
					<div style={{ height: '50px', backgroundColor: 'green', display: 'flex', justifyContent: 'center', alignContent: 'center', lineHeight: '50px' }}>我也是有低线的。。</div>
					:
					<div style={{ height: '50px', backgroundColor: 'green', display: 'flex', justifyContent: 'center', alignContent: 'center', lineHeight: '50px' }}>正在加载中。。。
					</div>
				}
			</div>
			{/* 回到顶部 */}
			<button style={{ position: 'absolute', backgroundColor: '#fff', height: '50px', width: '50px', border: 'none', borderRadius: '50%', zIndex: '200', bottom: '0', right: '0' }} onClick={() => {
				window.scrollTo(50, 0)
			}}>顶部</button>
		</div>
	)
}