首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

peter_qyq

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
深入理解Antd-Select组件的用法
Feb 25 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
postcss-px2rem(1) mixin(1) 相对定位(1) ref(1) lua(3) 索引树扫描(1) geoserver(1) 匹配(1) 绝对定位(1) props(1)
You might like
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php工具型代码之印章抠图
2018/07/18 PHP
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
Craghoppers德国官网：户外和旅行服装
2020/02/14 全球购物
商务助理求职信范文
2014/04/20 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2019年度行政文员工作计划范本！
2019/07/04 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Mysql 如何批量插入数据
2021/04/06 MySQL
i7 6700处理器相当于i5几代
2022/04/19 数码科技
服务器间如何实现文件共享
2022/05/20 Servers
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL