java--移动端分页--dropload
来源:互联网 发布:智通预算软件 编辑:程序博客网 时间:2024/05/29 12:46
功能描述:做移动端实现滑动屏幕分页
引用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" onclick="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>
效果图
- java--移动端分页--dropload
- 移动端下拉刷新、上拉加载更多插件dropload
- 利用dropload.min.js实现下拉分页
- bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
- 移动端下拉刷新、上拉加载更多插件dropload的使用
- dropload.js实现下滑加载更多分页功能
- 移动端分页
- 移动端的分页
- 移动端js分页
- 移动端的分页缓存
- dropload.js
- dropload手机端上拉刷新
- app端分页 简单的分页 java
- js 实现无限加载分页(适合移动端)
- 移动端滑动分页详解(手写插件+亲测demo)
- js 实现无限加载分页(适合移动端)
- dropload.js下拉加载应用
- dropload.js无限刷新解决方案
- Java从网络(http)读取图片并保存至本地
- HTTP与HTTPS的区别
- 单据编辑插件
- 如何选择 compileSdkVersion, minSdkVersion 和 targetSdkVersion
- 和最大子矩阵
- java--移动端分页--dropload
- 131. Palindrome Partitioning
- 使用eclipse打包maven
- docker registry v2认证备忘
- Qt之操作数据库(SQLite)实例
- 修改win7的登录界面背景与关机背景
- 总结一下基础和我遇到的问题 (关键字 -- 存储类型)
- 安卓textview edittext 中inputType的类型
- 字符串正则匹配