使用jQuery实现HTML5页面上滑加载更多功能的方案:
1. 页面结构
<div id="content-container">
<!-- 这里原本应由v-for循环生成的div.item将由JavaScript动态添加 -->
</div>
<!-- 加载提示区域 -->
<div id="load-more" style="display:none;">
<p>Loading...</p>
</div>
2. JavaScript(使用jQuery)
$(document).ready(function () {
var items = []; // 存储已加载的数据项
var page = 1; // 当前请求页码
var loadingMore = false; // 是否正在加载更多
var hasMore = true; // 是否还有更多数据可供加载
function fetchData() {
loadingMore = true;
$('#load-more').show(); // 显示加载提示
$.ajax({
url: 'your-api-url',
type: 'GET',
data: { page: page, limit: 15 },
success: function (response) {
var newItems = response.items; // 假设API返回数据结构中包含一个名为items的数组
if (newItems.length < 15) {
hasMore = false; // 如果本次加载数量不足15条,说明已无更多数据
}
$.each(newItems, function (index, item) {
var newItemHtml = '<div class="item">' + /* 渲染单个数据项内容 */ + '</div>';
$('#content-container').append(newItemHtml);
});
page++;
loadingMore = false;
$('#load-more').hide(); // 隐藏加载提示
},
error: function (jqXHR, textStatus, errorThrown) {
console.error('Error fetching more data:', textStatus, ', Details:', errorThrown);
loadingMore = false;
$('#load-more').hide(); // 隐藏加载提示
},
});
}
$(window).on('scroll', function () {
var contentContainer = $('#content-container');
var threshold = 100;
var containerOffset = contentContainer.offset().top + contentContainer.outerHeight();
var windowBottom = $(window).scrollTop() + $(window).height();
if (!loadingMore && windowBottom > containerOffset + threshold && hasMore) {
fetchData();
}
});
// 初始加载第一页数据
fetchData();
});
解释说明
- 使用
div#content-container
来存放数据项,添加了一个隐藏的div#load-more
用于显示加载中的提示。 - JavaScript部分,我们使用jQuery来处理DOM操作和事件监听:
- 定义全局变量
items
、page
、loadingMore
和hasMore
- 成功后,将新数据逐个生成对应的HTML字符串并追加到
#content-container
内,同时更新页码和loadingMore
状态。若本次加载数据不足15条,则设置hasMore
为false
。若请求失败,打印错误信息并恢复loadingMore
状态。在请求开始和结束时,分别显示和隐藏加载提示。 - 使用
$(window).on('scroll', ...)
监听窗口滚动事件。在回调函数中,计算content-container
距窗口底部的距离,当距离小于等于阈值(100像素),且当前未处于加载状态且仍有更多数据时,触发fetchData
方法加载更多数据。 - 页面加载完成后,立即调用
fetchData
函数加载第一页数据。
使用div
展示数据,通过Ajax动态加载,距离底部100像素时触发加载,加载中显示提示,加载失败时不重试,每次加载15条数据。
欢迎关注公-众-号【TaonyDaily】、留言、评论,一起学习。
Don’t reinvent the wheel, library code is there to help.
若有帮助到您,欢迎点赞、转发、支持,您的支持是对我坚持最好的肯定(_)
你要保守你心,胜过保守一切。
作者:刘俊涛的博客