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 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 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
GD输出汉字的函数的分析
2006/10/09 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python求前n个阶乘的和实例
2020/04/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
python定时截屏实现
2020/11/02 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
机关出纳岗位职责
2014/04/03 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
英语教师求职信
2014/06/16 职场文书
市场策划求职信
2014/08/07 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL