首页
所有分类
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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
学习ExtJS（一） 之基础前提
Oct 07 Javascript
js工具方法弹出蒙版
May 08 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
移动端H5页面返回并刷新页面（BFcache）的方法
Nov 06 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
set(1) Next.js(1) SingleFlight(2) pip(1) frozenset(1) Mybatis-Plus(3) 脚手架(2) 字典(3) el-table(1) 并发(8)
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
php UBB 解析实现代码
2011/11/27 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python中的闭包实例详解
2014/08/29 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python实现堆排序的实例讲解
2020/02/21 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Debenhams百货英国官方网站：Debenhams UK
2016/07/12 全球购物
孕妇装中的著名品牌：Isabella Oliver（伊莎贝拉·奥利弗）
2016/10/31 全球购物
英国拳击装备购物网站：RDX Sports
2018/01/23 全球购物
如何提高MySql的安全性
2014/06/19 面试题
文秘自荐信
2013/10/20 职场文书
运动会广播稿150字
2014/02/19 职场文书
美容院店长岗位职责
2014/04/08 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
计划生育目标责任书
2015/05/09 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python