java--移动端分页--dropload

功能描述：做移动端实现滑动屏幕分页  

引用CSS,JS  :

<link rel="stylesheet" href="<%=WEBPATH%>/css/dropload.css" />
<script type="text/javascript" src="<%=WEBPATH %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=WEBPATH%>/js/dropload.js"></script>

这3个是必须要的,百度可以下载的到

后台java代码

@RequestMapping("paIdList")
@ResponseBody
public Map<String,Object> paIdList(
@RequestParam(value="pageCount",required = true) int pageCount,
@RequestParam(value="pageNum",required = true) int pageNum,
HttpSession session){
//用户信息
UserInfoVO userInfoVO = (UserInfoVO) session.getAttribute(SessionConstants.USER_SESSION_ID);
Map<String,Object> map = new HashMap<String,Object>();
Map<String,Object> model = new HashMap<String,Object>();
map.put("userId",userInfoVO.getUserId());
try{

List<BrokerAgeVO> list = brokerAgeService.paIdList(map,pageNum,pageCount);
model.put("list",list);
model.put("pageCount",pageCount);
}catch(Exception e){

e.printStackTrace();
}
return model;
}

前台代码

<script type="text/javascript">
$(function(){
   // 页数
   var pageNum = 0;
   // 每页展示5个
   var pageCount = 5;
   // dropload
   $('.broke').dropload({
       scrollArea : window,
       loadDownFn : function(me){
        pageNum++;
           // 拼接HTML
           var result = '';
           $.ajax({
          data:{
"pageNum" : pageNum,
"pageCount" : pageCount,
},
               type: 'POST',
               url: '<%=WEBPATH %>/brokerage/brokerAgeList',
               dataType: 'json',
               success: function(data){                
                //当数据为空时
                          if(data.list == null || data.list == ''){
                         $(".dropload-load").replaceWith("<div class='dropload-noData'>暂无数据</div>");
    return false;                      
                          }
                var arrLen = '';
                   arrLen = data.list.length;                   
                if(arrLen > 0 ){
                        for(var i=0; i<arrLen; i++){
                        //判断支付状态
                        var delivery = "";
                    if(data.list[i].status == 0){
                    delivery = "待确定";
                    }else {
                    delivery = "待支付";
                    } 
                    result +=  
                    '<div class="position-d" οnclick="selldetails(\''+data.list[i].achieveNo+'\');">'
                    +'<div class="position-l">'
                          +'<div class="position-one">'
                          +'<p class="position-one-p1">'+data.list[i].prodName+'</p>'            
                                         +'</div>'
                                         +'<div class="position-two"> '
                                         +'<p style="font-size:13px">编号： '+data.list[i].orderNo+'</p>'
                                     +'<p style="font-size:13px">类型：'+data.list[i].typeName+'</p>'
                                     +'<p style="font-size:13px">数量：'+data.list[i].goodsCount+'</p>'
                                         +'</div>'
                                         +'<div class="position-three" >'
                                        +'<p style="font-size:13px">提交日期： '+data.list[i].submitDate+'</p>'
                                    +'<p style="font-size:13px">：'+parseFloat(data.list[i].comMission).toFixed(2)+'</p>'
                                      +'<p style="color:red;font-size:13px">'+delivery+'</p>'
                                      +'<i class="head-arr-right"></i>'
                                    +'</div>'                                  
                    +'</div>'
                    +'</div>';
                        }
                    }                         
                   setTimeout(function(){
                       // 插入数据到页面，放到最后面
                       $('#broker').append(result);
                       // 每次数据插入，必须重置
                       me.resetload();
                   });
               },
               error: function(xhr, type){
                layer.msg('数据加载错误 !!');
                   // 即使加载出错，也得重置
                   me.resetload();
               }
           });
       }
   });
});

</script>

<div  class="broke">
   <div  id="broker"> 
   </div>              
</div> 

效果图