js插件dropload上拉下滑加载数据实例解析
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要为大家详细解析了js插件dropload上拉下滑加载数据实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码，供大家参考，具体内容如下
效果图：
1.导入js
dropload.min.js
zepto.min.js <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
2.后台查询
/**
* 我找的劵
*
* @return
*/
@Action("IFindTicket")
public String IFindTicket() {
try {
FuTransaction transaction = fuTransactionService.findByUserId(userId);
Map<String, Object> map = new HashMap<String, Object>();
map.put("transactionId", transaction == null ? 0L : transaction.getId());
List<FuStockAccount> accounts = fuStockAccountService.findAccountByMap(0, 5, map);
this.getActionContext().put("accounts", accounts);
} catch (Exception e) {
e.printStackTrace();
logger.equals(e);
}
return SUCCESS;
}
/**
* 我找的劵数据
*
* @return
*/
@Action("findTicketData")
public String findTicketData() {
try {
FuTransaction transaction = fuTransactionService.findByUserId(userId);
Map<String, Object> map = new HashMap<String, Object>();
map.put("transactionId", transaction == null ? 0L : transaction.getId());
List<FuStockAccount> accounts = fuStockAccountService.findAccountByMap(0, Integer.MAX_VALUE, map);
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
if (accounts.size() > 0) {
for (FuStockAccount account : accounts) {
JSONObject obj = new JSONObject();
obj.put("id", account.getId());
obj.put("openEquity", account.getOpenEquity());
obj.put("capitalAccount", account.getCapitalAccount());
obj.put("transactionStatus", account.getTransactionStatus());
obj.put("status", account.getTransactionStatus() == 0 ? "正在操作" : "已退劵");
obj.put("available", new DecimalFormat("#,###,##0.00").format(account.getAvailable() == null ? 0 : account.getAvailable()));
obj.put("ableMoney", new DecimalFormat("#,###,##0.00").format(account.getAbleMoney() == null ? 0 : account.getAbleMoney()));
obj.put("createTime", new SimpleDateFormat("yyyy.MM.dd").format(account.getCreateTime()));
array.add(obj);
}
}
json.put("array", array);
write(json.toString());
} catch (Exception e) {
e.printStackTrace();
logger.error(e);
}
return null;
}
3.页面插件的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<%@ include file="../common/meta.jsp" %>
<%@ include file="/WEB-INF/include/tagtld.jsp"%>
<title>${title}－我找的券</title>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../common/css.jsp"%>
</head>
<body class="whiteBg">
<div class="sucContain" >
<div class="containImg">
<div class="infoList">
<!-- 列表 -->
<div class="findTicList">
<table class="findTicIn" cellpadding="0" cellspacing="0" width="100%" border="0">
<c:forEach items="${accounts }" var="stock">
<tr>
<td class=" smallSize firstTd">
<div class="upTh">
<span class="blueCol siz">${stock.openEquity }：${stock.capitalAccount}<%-- ***${fn:substring(stock.capitalAccount,3,5)} --%></span>
<c:if test="${stock.transactionStatus==0 }">
<a class="czIng">正在操作</a>
</c:if>
<c:if test="${stock.transactionStatus==1 }">
<a class="bacIng">已退券</a>
</c:if>
</div>
<div class="downLis">
<div class="leftDown">
<span class="leftDoFir">股票市值：<fmt:formatNumber value="${empty stock.available?0:stock.available}" pattern="#,###,##0.00"/>元</span><span>可用资金：<fmt:formatNumber value="${empty stock.ableMoney?0:stock.ableMoney}" pattern="#,###,##0.00"/>元</span>
</div>
<div class="rgtDown"><a href="${ctx}/wxyqb/accountInfo.htm?id=${stock.id}"><img class="lftJt" src="../images_yqb/mejtou.png"/></a></div>
</div>
<div class="ticketDat">发布时间：<fmt:formatDate value="${stock.createTime }" pattern="yyyy.MM.dd"/></div>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
</div>
</body>
<link href="../css/wxYqb.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/js/dropload.min.js" type="text/javascript"></script>
</html>
<script>
//下拉加载更多
$(function(){
var counter = 1;
// 每页展示5个
var num = 5;
var pageStart = 0,pageEnd = 0;
// dropload
$('.findTicList').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
domUpdate : '<div class="dropload-update">↑释放更新-自定义内容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无更多评论</div>'
},
loadUpFn : function(me){
$.ajax({
type: 'POST',
url: '${ctx}/wxyqb/findTicketData.htm',
data: {userId: ${fuUser.id}},
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < data.array.length; i++){
var arrText = [];
arrText.push(" <tr><td class='smallSize firstTd'>");
arrText.push("<div class='upTh'><span class='blueCol siz'>"+data.array[i].openEquity+"："+data.array[i].openEquity+"</span>");
if(data.array[i].transactionStatus==0){
arrText.push("<a class='czIng'>"+data.array[i].status+"</a></div>");
}
if(data.array[i].transactionStatus==1){
arrText.push("<a class='bacIng'>"+data.array[i].status+"</a></div>");
}
arrText.push("<div class='downLis'><div class='leftDown'><span class='leftDoFir'>股票市值："+data.array[i].available+"元</span><span>可用资金："+data.array[i].ableMoney+"元</span></div>");
arrText.push("<div class='rgtDown'><a href='${ctx}/wxyqb/accountInfo.htm?id="+data.array[i].id+"'><img class='lftJt' src='../images_yqb/mejtou.png'/></a></div></div>");
arrText.push("<div class='ticketDat'>发布时间："+data.array[i].createTime+"</div></td></tr>");
result += arrText.join('');
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.findTicIn').html(result);
// 每次数据加载完，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
loadDownFn : function(me){
$.ajax({
type: 'POST',
url: '${ctx}/wxyqb/findTicketData.htm',
data: {userId: ${fuUser.id}},
dataType: 'json',
success: function(data){
var length=data.array.length;
//判断是否有数据
if(length==0){
$(".dropload-down").hide();
}else if(length<=5){
$(".dropload-down").hide();
}else{
$(".dropload-load").show();
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
for(var i = pageStart; i < pageEnd; i++){
var arrText = [];
arrText.push(" <tr><td class='smallSize firstTd'>");
arrText.push("<div class='upTh'><span class='blueCol siz'>"+data.array[i].openEquity+"："+data.array[i].openEquity+"</span>");
if(data.array[i].transactionStatus==0){
arrText.push("<a class='czIng'>"+data.array[i].status+"</a></div>");
}
if(data.array[i].transactionStatus==1){
arrText.push("<a class='bacIng'>"+data.array[i].status+"</a></div>");
}
arrText.push("<div class='downLis'><div class='leftDown'><span class='leftDoFir'>股票市值："+data.array[i].available+"元</span><span>可用资金："+data.array[i].ableMoney+"元</span></div>");
arrText.push("<div class='rgtDown'><a href='${ctx}/wxyqb/accountInfo.htm?id="+data.array[i].id+"'><img class='lftJt' src='../images_yqb/mejtou.png'/></a></div></div>");
arrText.push("<div class='ticketDat'>发布时间："+data.array[i].createTime+"</div></td></tr>");
result += arrText.join('');
if((i + 1) >= data.array.length){
// 锁定
me.lock();
// 无数据
me.noData();
break;
}
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.findTicIn').append(result);
// 每次数据加载完，必须重置
me.resetload();
},1000);
};//if end
},//success结束
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});//ajax结束
},//上拉结束
threshold : 50
});//drop结束
});
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。