doushi8599 2016-02-27 04:42
浏览 35
已采纳

无限滚动显示范围之间的东西

How do I display something when my infinite scroll between range?

For an Example : I want to display my Ads when infinite scroll feed by 3 range.

1 TEXT1
2 TEXT2
3 TEXT3

Ads //Added when it's feed by 3 range.

4 TEXT4
5 TEXT5
6 TEXT6

Ads //Added when it's feed by 3 range.

...(Repeat until finish)

scroll.php

<?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!");
 }
 });

});

Here's example live Demo from original site.

  • 写回答

1条回答 默认 最新

  • doumiebiao6827 2016-02-27 05:38
    关注

    Try keep track of an index alongside your data fetching

    $index = 0; 
    while( $row = $data->fetch_array(MYSQLI_ASSOC)){ 
    //... your other code 
    if($index++%3==2){ 
    $str.="ad stuff"; 
    } 
    
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 爬去app图片链接这是加密了吗 怎么解(语言-java)
  • ¥50 请教Windows server 2012 R2的DCOM配置问题
  • ¥15 adasis v3中LaneConnectivity
  • ¥20 jsp在SpringMVC框架中手动设置域对象失效的场景
  • ¥15 stc -isp烧录时显示通信超时
  • ¥15 VS2022的代码折叠加减号不见了怎么办?
  • ¥15 电脑登录粤政易软件,二维码一直空白,或账号密码登录提示服务器登录失败,是什么原因(相关搜索:防火墙)
  • ¥30 微博热门内容爬虫报错
  • ¥15 selenium获取非固定位置的元素
  • ¥50 手写签名不能上传的问题