php滚动加载分页,手机端使用jq scroll配合ajax下拉加载分页数据

需求：手机端默认显示5条数据，手指滑动到最低部加载第二页的数据，以此类推，实现下拉加载分页数据的功能，虽然说不是什么复杂的东西，但是在手机上还是有一个比较大的坑，在下面细说！

先来看一波效果图：当下拉时加载数据，嗯、效果还凑合。

说下原理：

一、使用scrollTop获取到滚动的地方的窗口顶端到这个那个页面的距离$(document).scrollTop()

二、获取整个页面的高度

$(document).height()

三、获取当前也就是你浏览器所能看到的页面的那部分高度，这个大小在缩放浏览器的时候会改变，跟document不一样$(window).height()

四、如果判断当前滚动的位置是否大于整个窗口减去看到部分的高度，如果是就到底了，相信这个没什么好说的大家都想得明白！$(document).scrollTop() >=  $(document).height() - $(window).height()

五、当我们滑动到最低下就触发ajax请求加载数据

六、将加载好的数据append追加到后面就可以了

七、下来我们看下具体的javascript代码实现

var page = 1; //这是一个全局的变量，作为我们的页码，超过以此就+1

var a = 0     //定一个全局变量，防止重复加载，这是个大坑所在

$(document).ready(function() {

$(window).scroll(function() {

if ($(document).scrollTop()<=0){

layer.msg('正在刷新中',{icon:1,time:2000});

setTimeout("reloads()",2500);

return;

}

if ($(document).scrollTop() >=  $(document).height() - $(window).height()) {

if(a==0){

page ++;

console.log(i);

layer.msg('正在加载数据',{icon:1,time:2000});

var channel_id = $(".key-tab .acti").attr('data-id');

setTimeout(function () {

ajaxData(i,channel_id);

},1200); //定时调用，让弹框显示，不然会太快你看不到弹框显示数据就加载完毕了，会很蒙蔽

}

a++; //调用之后让它+1避免重复调用

return;

}

});

});

//定义一个函数让向上刷新

function reloads() {

location.reload();

}

//加载数据，传入相应的页码，和条件

function ajaxData(page,channel_id){

$.ajax({

type:'post',

url:"/index/ajaxExpo",

data:{'page':page,'channel_id':channel_id},

success:function (data) {

$("#data-"+channel_id).append(data);

a = 0; //将全局变量清理，让下次好使用

}

});

}

八、看下php代码public function ajaxExpo(){

try{

if(!request()->post()){

throw new \LogicException('请求方式错误',10020);

}

$post = request()->post();

$start = $post['page'] * 3; //根据页码计算开始页，由于我们加载了1页就不用-1了

$limit = $start.',3';

//获取数据，自己封装的函数，你们就自己来啦！

$list = GetData::getData('news',['channel_id' => $post['channel_id']],'id,title,author,create_time,channel_id,file_path','order_by desc',$limit);

if(empty($list)){

throw new \LogicException('没有更多啦');

}

}catch (\Exception $e){

return json(['msg'=>$e->getMessage(),'code'=>$e->getCode()]);

}

return view('ajaxExpo',['list'=>$list]);

}

九、我ajax直接返回的页面，不懂得可以看我前面的文章[ajax返回页面]，贴个代码，就是直接循环数据的页面，我们将它直接返回回去，就不用each遍历追加了！<?php  foreach($list as $v1){?>

$v1['id']])?>">

            " alt="<?php  echo $v1['title']?>" >

<?php  echo $v1['title'];?>

来源：<?php  echo $v1['author'];?>

最后来填坑：

虽然已经实现了，在电脑上预览发现一切正常，好得不能再好啦。

但是上线之后再手机上预览发现无效,蛋了个疼！

经过打断点，发现并不是无效，而是手机上一下拉scroll事件会触发n次，让加载数据直接陷入死循环，说得严重点哈，其实也有好几十次一时反应不过来！

找到问题了就好解决了，怕的是不知道如何找问题！

so,我定义了一个全局变量 a

当scroll触发一次我们将它加一

确保我们触发ajax是在a==0 的条件下触发的 就行啦！

当我们在ajax返回之后我们再将这个全局变量置0，让第二次下拉的时候不至于还是1，条件不成立不能触发ajax加载数据