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

PHP 1287浏览 评论

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

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

image.png

说下原理:

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

$(document).scrollTop()


二、获取整个页面的高度

$(document).height()

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

$(window).height()

四、如果判断当前滚动的位置是否大于整个窗口减去看到部分的高度,如果是就到底了,相信这个没什么好说的大家都想得明白!

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

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

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

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

<script type="text/javascript" src="/static/home/js/layer.js"></script>
<script type="text/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; //将全局变量清理,让下次好使用
            }
        });
    }
     </script>

八、看下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){?>
<li>
    <a href="<?php echo url('article/expoArticle',['id'=>$v1['id']])?>">
        <div class="pict">
            <img src="/uploads/<?php echo $v1['file_path']?>" alt="<?php echo $v1['title']?>" >
        </div>
        <div class="text">
            <h2><?php echo $v1['title'];?></h2>
            <p>来源:<?php echo $v1['author'];?></p>
        </div>
    </a>
</li>
<?php } ?>

最后来填坑:

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

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

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

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

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

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

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

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

本文连接:http://www.phpbloger.com/article/35.html 文章都为原创,转载请注明出处!

相关文章