在较大的监视器中,如果按div内容限制加载完成后,我的无限滚动内容不会加载更多其他div内容。所以我必须通过创建加载更多按钮来解决这个问题。
如何在代码上创建加载更多按钮?
scroll.php
include('db.php');
if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
call_user_func($actionfunction,$_REQUEST,$con,$limit);
}
function showData($data,$con,$limit){
$page = $data['page'];
if($page==1){
$start = 0;
}
else{
$start = ($page-1)*$limit;
}
$sql = "select * from infinitescroll order by id asc limit $start,$limit";
$str='';
$data = $con->query($sql);
if($data!=null && $data->num_rows>0){
while( $row = $data->fetch_array(MYSQLI_ASSOC)){
$str.="<div class='data-container'><p>".$row['id']."</p><p>".$row['firstname']."</p><p>".$row['lastname']."</p></div>";
}
$str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
} else {
$str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>";
}
echo $str;
}
scroll.js
var ajax_arry = [];
var ajax_index = 0;
var sctp = 100;
$(function () {
$('#loading').show();
$.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=1",
cache: false,
success: function (response) {
$('#loading').hide();
$('#demoajax').html(response);
}
});
$(window).scroll(function () {
var height = $('#demoajax').height();
var scroll_top = $(this).scrollTop();
if (ajax_arry.length > 0) {
$('#loading').hide();
for (var i = 0; i < ajax_arry.length; i++) {
ajax_arry[i].abort();
}
}
var page = $('#demoajax').find('.nextpage').val();
var isload = $('#demoajax').find('.isload').val();
if ((($(window).scrollTop() + document.body.clientHeight) == $(window).height()) && isload == 'true') {
$('#loading').show();
var ajaxreq = $.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=" + page,
cache: false,
success: function (response) {
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
}
});
ajax_arry[ajax_index++] = ajaxreq;
}
return false;
if ($(window).scrollTop() == $(window).height()) {
alert("bottom!");
}
});
});
此处的示例来自原始网站的实时Demo。
答案 0 :(得分:1)
我没有看到问题。添加到html按钮或链接id&#34; load-more-button&#34;并将此代码附加到scroll.js
$('#load-more-button').click(function(e) {
e.preventDefault();
var page = $('#demoajax').find('.nextpage').val();
$('#loading').show();
$.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=" + page,
cache: false,
success: function (response) {
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
var isload = $('#demoajax').find('.isload').val();
if(!isload) $('#load-more-button').hide();
}
});
});