php+jquery实现上拉翻页(下来刷新上拉加载更多) - Alex的博客

Alex的博客

本博客的文章均为原创,是本人从事行业多年来所遇见一些小问题的解决心得,希望可以帮助到大家!



php+jquery实现上拉翻页(下来刷新上拉加载更多)

则个功能我折腾了好几天,最蛋疼的就是解决重复加载内容的问题,在网上也找了好多现成的插件,但是多多少少都有写限制和问题。不过最终还是解决了记录一下;

程序后端api.php


//手机站城市首页翻页
public function city_moble_course(){
//获取传递过来的页码
$page=intval($_GET['page']);
if ($page) {
  //每页显示多少条
  $num=2;
  //当前多少条开始
  $page=$page*$num;

这里是框架的控制器写法你可以直接改成你自己的写法反正就是你去数据库分页请求数据的代码,
$num为每一页显示多少条记录,$page是从多少条记录开始
$data['course']=$this->alex->city_course($num,$page,$par_arr);
这里是把请求获得的数据进行循环组合为一维数组
    $da='';
    foreach ($data['course']['course']as  $value) {

        $da[]=array(

            'school_name'=>$data['course']['school'][$value->school_course_schoolid]->school_name,
            'school_id'=>$value->school_course_schoolid,
            'course_img'=>$value->school_course_img,
            'course_price'=>$value->school_course_price,
            'course_name'=>$value->school_course_name,
            'course_id'=>$value->school_course_contentid,
            'course_num'=>$data['course']['count'][$value->school_course_contentid],
            'course_sprice'=>$value->school_course_sprice,
            'zj'=>$zj,
            'jg'=>$jg
            );
    }
把数组转换为json格式并输出
echo json_encode($da);
}
}
上面就是api接口的写法其实很简单就是提高json格式的数据


下面是前端代码

index.html

<div id="container">

</div>


<script type="text/javascript">
//初始页码
var i = 1;
//设置锁定状态
var msg_list_loading = false;
$(function(){
//监听滚动条滚动事件
    $(window).scroll(function () {
      //alert($(document).scrollTop());  //当前滚动条位置;
      //alert( $(document).height()); //当前文档滚动条总长度
      //alert($(window).height());  //当前窗口高度
        //var winH = $(window).height(); //页面可视区域高度
        // var pageH = $(document.body).height();
        // var scrollT = $(window).scrollTop(); //滚动条top
        // var aa = (pageH-winH-scrollT)/winH;
        // if (aa < 0.02) {
        //如果滚动条到达底部就获取新数据追加到容器
        // if($(document).scrollTop() >= $(document).height() - $(window).height() && x!=i){

            var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
          //判断是否为锁定状态
       if(!msg_list_loading){
        //开启锁定状态
            msg_list_loading = true;
            setTimeout($.getJSON("<?php echo  base_url('home/city_moble_course/'.$city_pinyin);?>",{page:i},function(json){
              // alert(msg_list_loading+i);
                if(json){
                    var str = "";
                    $.each(json,function(index,array){


                      var str ="<div class='l itemStep'>";
                      var str =str + "<div class='pic'>";
                      var str =str + "<a href='index1.html' title='"+array['course_name']+"' >";
                      var str =str + "<img src='<?php echo $sysimgurl.'/';?>"+array['course_img']+"' >";
                      var str =str + "</a>";
                      var str =str + "</div>";
                      var str =str + "<div class='courseHover'>";
                      var str =str + "<div class='courseInfo'>"+array['course_name']+"</div>";
                      var str =str + "<div class='courseInfo1'><a href='"+array['school_id']+"'>认证机构:"+array['school_name']+"</a></div>";
                      var str =str + "<div class='vab'><span class='price' >¥<em>"+array['jg']+"</em></span>";
                      var str =str + array['zj']+"<span>已售<span>"+array['course_num']+"</span> </span>";
                      var str =str + "</div>";

                      var str =str + "</div>";
                      var str =str + "</div>";
                        $("#container").append(str);

                    });

                    i++;
                    //解除锁定状态
                    msg_list_loading = false;
                }else{
                    $(".container").show().html("已经没有更多内容了。。。");
                    return false;
                }
            }),1000);

            //如果滚动条达到顶部就刷新
              }
        }else if ($(document).scrollTop() <= 0) {
                    //alert("滚动条已经到达顶部为0");
                    window.location.reload();//刷新当前页面
                }
    });

});

</script>
这个代码的好处是直接监听浏览器的滚动条 而不是监控元素的滚动条,不会受网站结构或者层的影响,而且代码简洁,无需加载额外的插件,也不会害怕插件冲突,


之前我测试用zepto的时候就与jquery冲突了不过也有解决办法,我没测试过。

解决方案:


特殊操作下,项目中同时引入这两个文件时,往往会有些冲突,应该加一句代码避免冲突

 <script src="~/js/jquery-2.1.4.js"></script>
 <script>jQuery.noConflict()</script>
 <script src="~/js/zepto.min.js"></script>
加这句
<script>jQuery.noConflict()</script>
好了就先到这里把继续干活儿


浏览2402  评论0  Alex于 2017-4-21 13:17
发言