这篇文章主要为大家详细解析了 js 插件 dropload 上拉下滑加载数据实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
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>
来源: http://www.phperz.com/article/17/0328/264077.html