<!DOCTYPE html>
<html>
<head>
<title>下拉刷新和上拉加载示例</title>
<style>
#list-container {
height: 300px;
overflow: auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="list-container">
<!-- ListView的内容将会被插入到这里 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var listTop = $('#list-container').offset().top;
var isLoading = false;
var page = 1;
$('#list-container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).height();
var listHeight = $(this).prop('scrollHeight');
if (scrollTop === 0 && !isLoading) {
// 下拉刷新
refreshList();
} else if (scrollTop + scrollHeight >= listHeight && !isLoading) {
// 上拉加载
loadMoreItems();
}
});
function refreshList() {
isLoading = true;
// 模拟网络请求刷新数据
setTimeout(function() {
// 更新ListView的内容
$('#list-container').empty();
for (var i = 0; i < 20; i++) {
$('#list-container').append('<div>Item ' + i + '</div>');
}
isLoading = false;
}, 1000);
}
function loadMoreItems() {
isLoading = true;
// 模拟网络请求加载更多数据
setTimeout(function() {
page++;
for (var i = 20 * (page - 1); i < 20 * page; i++) {
$('#list-container').append('<div>Item ' + i + '</div>');
}
isLoading = false;
}, 1000);
}
refreshList(); // 初始化时刷新列表
});
</script>
</body>
</html>这段代码展示了如何使用jQuery来实现一个简单的下拉刷新和上拉加载的功能。它包括了下拉刷新操作的检测、上拉加载操作的检测，以及加载动画的模拟（使用setTimeout函数）。这个例子可以作为学习如何在Web应用中实现这些常见的用户界面交互模式的起点。