web和webApp如何实现上拉加载和下拉刷新

web端中处理列表有两种方式：一种是通过分页界面表示当前是多少页，通过点击上一页和下一页切换页面显示。

另一种是基于滑动框滚动实现下拉刷新和上拉加载功能实现。

android和ios中经常会有下拉刷新列表和上拉加载功能实现。

web和webApp中也可以通过下拉加载和上拉刷新实现该功能。

实现思路：

1.后端提供分页接口

2.list页面打开默认显示第一页的列表

3.js监听到页面顶部下拉时，清除所有list显示，请求第一页列表显示

4.js监听到页面滚动到底部时，增量加载下一的列表进行列表显示

实现效果：

实现代码：

newList.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"

Biegral Blog