jQuery实现自动加载更多评论:滚动到底部自动加载
<div class="col-12 comments">
<!--显示评论-->
</div>
<div class="col-12 ThreeTextHide" style="padding-bottom: 20px">
<button type="button" class="btn btn-outline-secondary w-100 more_comments">点击加载更多</button>
</div>
<script>
$(document).ready(function() {
// 定义函数来加载更多数据
function loadMoreComments() {
// 获取当前显示的评论数量
var commentsCount = $('.comments .comment').length;
// 发送Ajax请求,获取更多数据
$.ajax({
url: 'load_more_comments.php',
type: 'POST',
data: {offset: commentsCount},
dataType: 'html',
success: function(data) {
// 将新数据添加到评论区域
$('.comments').append(data);
}
});
}
// 点击按钮加载更多数据
$('.more_comments').click(function() {
loadMoreComments();
});
// 监听滚动事件,当滚动到页面底部时自动加载更多数据
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
loadMoreComments();
}
});
});
</script>
<p>在上面的代码中,我们定义了一个函数loadMoreComments()来加载更多数据。初始化页面时,我们通过点击按钮来加载更多数据。同时,我们监听了滚动事件,当滚动到页面底部时也会自动加载更多数据。注意,我们使用了offset参数来指定从哪个位置开始加载更多数据。在load_more_comments.php中,需要根据这个参数来获取相应的数据。</p>
原文地址: https://www.cveoy.top/t/topic/oBJJ 著作权归作者所有。请勿转载和采集!