js插件dropload上拉下滑加載數據實例解析

作者：Eve Cole 更新時間：2025-07-26 21:32:01

本文實例為大家分享了dropload插件上拉下滑加載數據的具體代碼，供大家參考，具體內容如下

效果圖：

1.導入js

dropload.min.js

zepto.min.js

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> <div > <div> <div> <!-- 列表--> <div> <table cellpadding="0" cellspacing="0"> <c:forEach items="${accounts }" var="stock"> <tr> <td> <div> <span>${stock.openEquity }：${stock.capitalAccount}<%-- ***${fn:substring(stock.capitalAccount,3,5)} --%></span> <c:if test="${stock.transactionStatus==0 }"> <a>正在操作</a> </c:if> <c:if test="${stock.transactionStatus==1 }"> <a>已退券</a> </c:if> </div> <div> <div> <span>股票市值：<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><a href="${ctx}/wxyqb/accountInfo.htm?id=${stock.id}"><img src="../images_yqb/mejtou.png"/></a></div> </div> <div>發佈時間：<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>↓下拉刷新-自定義內容</div>', domUpdate : '<div>↑釋放更新-自定義內容</div>', domLoad : '<div><span></span>加載中-自定義內容...</div>' }, domDown : { domClass : 'dropload-down', domRefresh : '<div>↑上拉加載更多</div>', domLoad : '<div><span></span>加載中...</div>', domNoData : '<div>暫無更多評論</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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。