引入的库都是使用cdn外链，所以可以直接新建文件测试使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mui上拉加载和下拉刷新</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/mui/3.7.1/css/mui.min.css">
<script src="https://cdn.staticfile.org/mui/3.7.1/js/mui.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/Mock.js/1.0.1-beta3/mock.js"></script>
<style>
/* 解决web调试报错 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL> */
* {
touch-action: pan-y;
}
</style>
</head>
<body>
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<p>如果加载内容的元素上面有其他元素，可以加在这里</p>
<ul id="content">
<!-- 数据加载元素-->
</ul>
</div>
</div>
<script>
let count = 0 //页码
let data = [] //展示的数据
// 模拟后台/user/userInfo接口返回值
Mock.mock('/user/userInfo', '@range(1, 13)')
function getData(type) {
// 如果执行的是下拉的回调，那么就清空数据
if (type == 'down') {
count = 0
data = []
}
// 获取后台数据
$.ajax({
url: '/user/userInfo',
// dataType: 'json',
success: (res) => {
res = JSON.parse(res)
data = [...data, ...res]
console.log('当前数据', data);
// 遍历使得数据追加到内容容器里
for (let i = 0; i < res.length; i++) {
let li = document.createElement('li')
li.innerText = res[i]
li.style.cssText = "height:50px;border:1px solid yellow;";
console.log(li);
console.log(document.querySelector('#content'));
document.querySelector('#content').appendChild(li)
}
if (type == 'down') {
// 数据展示完后结束下拉
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
} else {
// 如果是上拉并且不超过 3 页数据时候继续加载
count++
}
mui('#refreshContainer').pullRefresh().endPullupToRefresh();
// 数据大于 3 页的时候，数据已经加载完了，所以停止加载
if (count > 3) {
this.endPullupToRefresh(true);
// 显示没有更多了提示文字
let li = document.createElement('li')
li.innerText = '没有更多数据了'
document.querySelector('#content').appendChild(li)
}
}
})
}
//上拉加载
mui('#refreshContainer').pullRefresh({
container: '#refreshContainer',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up: {
height: 50,//可选.默认50.触发上拉加载拖动距离
auto: false,//可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；默认显示位置在顶部
callback: getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
down: {
height: 10, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: function () {
document.querySelector('#content').innerHTML = ''
getData('down')
}
}
});
</script>
</body>
</html>
