不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

下拉加载刷新thinkphp代码设计(防游品味)

web 建伟 3180℃ 0评论

具体demo这里就不提供了,具体效果可以去游品味上看,只说一下设计原理,大家将就看一下。

代码中的下一页和总页码都是后台计算得到的。

首先是JS代码如下:

<script>
   $(function(){
      //数据是否在加载中
      var isLoading = false;
      //加载次数
      var count = 0;
      //滚动加载次数
      var scrollCount = 2;
      //检测
      function loadMore(){
         $(window).scroll(function(e){
            //只需滚动加载5次
            if(count > scrollCount) return;

            var domH = $(document).height();
            var sTop = $(document.body).scrollTop();
            var h = $(window).height();
            if(domH < (sTop + h + 300)){
               loadMoreGame();
            }
         });
      }

      //加载更多游戏
      function loadMoreGame(){
         //如果正在加载中,则返回
         if(isLoading) return;
         isLoading = true;
         var $loadMore = $("#loadMore");
         var url = $loadMore.attr("next-page");

         var next = $loadMore.attr("next");//获取下一页
         var pagenum = $loadMore.attr("pagenum");//总页码
         
         if(parseInt(next)>parseInt(pagenum)){
            $(".loading").text("没有了");
            return;
         }

         $.ajax({
            url:url,
            success:function(result){
               if(result){
                  var $obj = $("<div>"+result+"</div>");
                  $obj.find(".section-bd .evaluate-list .item").appendTo($(".evaluate-list"));
                  var nurl = $obj.find(".ypw-load-more").attr("next-page");
                  //设置下一页的url
                  $loadMore.attr("next-page",nurl);

                  var next = $obj.find(".ypw-load-more").attr("next");
                  $loadMore.attr("next",next);


                  isLoading = false;
                  //加载次数增加一次
                  count ++;
                  if(count > scrollCount){
                     $loadMore.find(".loading").hide();
                     //大于5次则点击加载
                     $loadMore.find(".load").show().click(function(){
                        $loadMore.find(".loading").show();
                        $(this).hide();
                        //加载更多游戏
                        loadMoreGame();
                     });
                  }
               }
            }
         });
      }
   })
</script>

html代码大致如下:

   <div class="section-bd">
     <ul class="list evaluate-list">
            <volist name="data" id="item">
   <li class="item">
      <div class="evaluate-sub-pic">
         <img src="/static/wap_new/images/avatar.png" alt="" class="evaluate-avatar">
      </div>
      <div class="evaluate-sub-desc">
         <div class="evaluate-header">
            <h3 class="evaluate-name">{fy_$item.username}</h3>
            <div class="evaluate-view">
               <i class="icon icon-eye"></i> {fy_$item.fpclick}
            </div>
            <small class="evaluate-time">{fy_$item.fpcreatetime|date="Y-m-d h:i",###}</small>
         </div>
         <div class="evaluate-body">
            <h5 class="comment-title"><a style="font-size: .3rem;" href="/home/forum/detail/id/{fy_$item.fpid}">{fy_$item.fptitle}</a></h5>
            <div class="comment">
               {fy_$item.fpcontent|strip_tags|iconv_substr=0,60,'utf-8'}
            </div>
         </div>
         <div class="evaluate-footer">
             <ul class="group-link">
                <li class="link link-divider">
                     <a href="#">
                        <i class="icon icon-comment"></i>
                        {fy_$item.frnum}
                     </a>
                </li>
                <li class="link">
                   <a href="#">
                      <i class="icon icon-like"></i>
                      {fy_$item.fpclick}
                   </a>
                </li>
             </ul>
         </div>
      </div>
   </li>
            </volist>
</ul>
    <div  class="ypw-load-more" pagenum="{fy_$pagenum}" next="{fy_$next}" id="loadMore" next-page="/home/forum/forum_list?p={fy_$next}">
     <div class="loading" style="display: none;" >
      正在加载 请稍后···
     </div>
     <div class="load" style="display: none;">
      <span>点击加载更多</span>
     </div>
    </div>
    <!-- /.evaluate-list -->
   </div>

接口返回代码设计:

<div class="section-bd">
<ul class="list evaluate-list">
   <volist name="data" id="item">
      <li class="item">
         <div class="evaluate-sub-pic">
            <img src="/static/wap_new/images/avatar.png" alt="" class="evaluate-avatar">
         </div>
         <div class="evaluate-sub-desc">
            <div class="evaluate-header">
               <h3 class="evaluate-name">{fy_$item.username}</h3>
               <div class="evaluate-view">
                  <i class="icon icon-eye"></i> {fy_$item.fpclick}
               </div>
               <small class="evaluate-time">{fy_$item.fpcreatetime|date="Y-m-d h:i",###}</small>
            </div>
            <div class="evaluate-body">
               <h5 class="comment-title"><a style="font-size: .3rem;" href="/home/forum/detail/id/{fy_$item.fpid}">{fy_$item.fptitle}</a></h5>
               <div class="comment">
                  {fy_$item.fpcontent|strip_tags|iconv_substr=0,60,'utf-8'}
               </div>
            </div>
            <div class="evaluate-footer">
               <ul class="group-link">
                  <li class="link link-divider">
                     <a href="#">
                        <i class="icon icon-comment"></i>
                        {fy_$item.frnum}
                     </a>
                  </li>
                  <li class="link">
                     <a href="#">
                        <i class="icon icon-like"></i>
                        {fy_$item.fpclick}
                     </a>
                  </li>
               </ul>
            </div>
         </div>
      </li>
   </volist>
   <div class="ypw-load-more" pagenum="{fy_$pagenum}" next="{fy_$next}" id="loadMore" next-page="/home/forum/forum_list?p={fy_$next}">
      <div class="loading" >
         正在加载 请稍后···
      </div>
   </div>
</ul>
</div>

转载请注明:Li Jianwei's Blog » 下拉加载刷新thinkphp代码设计(防游品味)

喜欢 (2)or分享 (0)
web技术交流群
22765697