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


Posted in Javascript onJuly 27, 2016

本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码,供大家参考,具体内容如下

效果图:

js插件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>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 #Javascript
js创建数组的简单方法
Jul 27 #Javascript
jQuery实现打开页面渐现效果示例
Jul 27 #Javascript
JavaScript中的this使用详解
Jul 27 #Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 #Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 #Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 #Javascript
You might like
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Python实现矩阵转置的方法分析
2017/11/24 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
详解python中的模块及包导入
2019/08/30 Python
关于Python-faker的函数效果一览
2019/11/28 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
车间统计员岗位职责
2014/01/05 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年采购部工作总结
2014/11/20 职场文书
2014年班组长工作总结
2014/11/20 职场文书
毕业设计致谢语
2015/05/14 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
商业计划书格式、范文
2019/03/21 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
详解MySQL集群搭建
2021/05/26 MySQL