js插件dropload上拉下滑加载数据实例解析

2019-11-20 09:24:35

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈js多维数组和hash数组定义和使用

下一篇：js 定义对象数组(结合)多维数组方法