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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js插件dropload上拉下滑加载数据实例解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8020字，纯文字阅读大概需要12分钟。

内容图文

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

效果图：

js插件dropload上拉下滑加载数据实例解析 - 文章图片

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>

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

内容总结

以上是互联网集市为您收集整理的js插件dropload上拉下滑加载数据实例解析全部内容，希望文章能够帮你解决js插件dropload上拉下滑加载数据实例解析所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/350961.html

来源：【匿名】

【上一篇】Js删除数组中某一项或几项的几种方法(推荐)【下一篇】javascript 怎么调用php方法

更多 ►

【js插件dropload上拉下滑加载数据实例解析】教程文章相关的互联网学习教程文章

VBA中使用JavaScript脚本语言解析JSON数据【代码】【图】

JSON：JavaScript 对象表示法（JavaScript Object Notation）和xml相似，都是文本形式（保存在文本文件中或字符串等形式），比如：jsstr = {"系别":"历史系","班级":"一班","学员":[{"姓名":"张三","年龄":25,"性别":"男"},{"姓名":"李四","年龄":20,"性别":"男"},{"姓名":"小明","年龄":20,"性别":"女"}]}1、{}表示对象,[]表示数组，数组的成员可以是对象，使用“属性:值”键值对形式表示属性。本例中jsstr对象有三个属性：系...

javascript事件代理(delegate)原理解析【代码】【图】

什么是事件代理？首先得知道什么是事件，并且弄清楚事件流，才能真正明白事件代理原理。一、什么是事件？　　javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。如onload、onclick、onmouseup、onmousedown... 。二、事件流　　DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，...

JavaScript 数组遍历动态增长问题（V8源码解析）【代码】【图】

数组 arr 在遍历同时动态增长会发生什么呢let arr = [1,2] arr.forEach(item => arr.push(...arr)) console.log(arr) // 输出: [ 1, 2, 1, 2, 1, 2, 1, 2 ] 并未输出 [1,2] 或 [1,2,1,2...] 无限循环下去JavaScript引擎:V8源码git地址：https://github.com/v8/v8vscode打开源码文件夹V8-MASTER/src/builtins-collections-gen.cc数组的循环遍历由 Goto 与 BIND 搭配完成，Goto(adress) 指跳转的目标adress , BIND(adress) 指对应...

【JavaScript】新浪微博ajax请求后改变地址栏url，但页面不跳转的方案解析

新浪微博当你弹出一个视频的时候再点下一页时，原视频还在，而且地址栏的url的页数变了。对于这种网上讨论最多的方案有以下几种：一、通过锚点Hash实现在这方面其实国内很早就有做了，比如淘宝画报，通过的是在地址栏后面加#锚点实现的，浏览器是可以识别锚点为单位的历史记录的。但不是说页面本身有这个锚点，锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。二、通过HTML5加强型的History对象实现(类Pjax)...

原生JavaScript，递归解析树状结构数据【代码】

// titleJson 为需要循环的数据，第二个参数是页面id 　　　　 generate(titleJson,document.getElementById(‘container‘));//这里生成DOM 递归树状格式function generate(titleJson,par){for(var attr in titleJson) {var ele=document.createElement(‘li‘);ele.innerHTML=`<span><span class="switch-close expansionofCa"></span><a class="locationcontent close-panel" style="font-size:.75rem;color:#fff;" id=...

javascript预解析详解

1、定义预解析:在当前作用域下，js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。然后从上至下解析js语句。而且function的声明优先于var声明。2、var声明通过var声明的变量，进行预解析的时候：先声明变量，不管变量有没有赋值，声明时都赋值为undefined。console.log(a); //undefinedvar a = 1;console.log(b); //undefinedvar b = function(){}12345注意: (1)同名的var声明和同名的函数声明，不管二...

Javascript闭包深入解析及实现方法【代码】【图】

1、什么是闭包闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中...

Javascript创建对象几种方法解析【代码】

Javascript创建对象几种方法解析Javascript面向对象编程一直是面试中的重点，将自己的理解整理如下，主要参考《Javascript高级程序设计第三版》，欢迎批评指正。通过字面量形式，创建对象: var person_1 = {name: "userName",age: 20}工厂模式创建对象通过一个构造函数接收参数的方式构造对象，可无数次调用这个函数，通过改变参数构造不同的对象 function createPerson(name,age){var o = new Object();//创建...

JavaScript（2）——网页解析过程【代码】【图】

JavaScript 网页解析过程前端编程工具：Visual Studio Code快捷语法：Emmett语法正题：　　当我们在浏览器输入网址的时候，从服务器下载网页；这个文字经过HTML解析器的处理生成一大堆对象，因此打开一个网页的时候会占用很大的内存。网页最终变成一副图片。网页解析成对象后，这些对象会被HTML渲染器（Rander）监视，然后把他们绘制成一张张图片；它会根据W3C去绘制，例如把button绘制成按钮，那么必须就绘制成按钮，绘制成怎样的...

D3.js以及通用JS（JavaScript）读取并解析服务器端JSON的注意事项

这个需求其实挺明确的，但是网上搜出来的教程都乱七八糟，觉得实在需要自己总结一下。 D3.js目前已经被广泛使用在数据可视化领域，随着大数据的持续发展，这个框架估计会在今后更加流行（据说其作者Mike Bostock开始全职开发了，之前是负责纽约时报数据可视化的工程师，他本人也从纽约搬家到了旧金山……）。按照这里的介绍：https://github.com/mbostock/d3/wiki/API-Reference，D3.js实际上有专门读取JSON数据的API，所以其实D3....

[JavaScript]作用域和预解析

作用域全局作用域：当浏览器关闭时才会销毁，较占资源。　　1. 指单独的js文件。　　2. 在函数内部没有声明直接赋值的变量，在函数执行后，也是全局变量。局部作用域：程序（代码块）执行完毕就会销毁。　　1. 一般指函数体内声明的。　　2. 函数的形参。*ES6新增：块级作用域:　　{ } if( ){ }　　　　　　for( ){ } 作用域链只要是代码，就至少有一个作用域。如果函数中还有函数，那么在这个作...

<JavaScript语言精粹>JSON解析器源码阅读【代码】

1// 这是一个用JavaScript编写JSON解析器的实现方案： 2var jsonParser = (function() {3// 这是一个能把JSON文本解析成JavaScript数据结构的函数。 4// 它是一个简单的递归降序解析器。 5// 我们在另一个函数中定义此函数，以避免创建全局变量。 6 7var at, // 当前字符索引 8 ch, // 当前字符 9 escapee = {10 ‘"‘: ‘"‘,11 "\\": "\\",12 "/": "/",13 b: "b",14 f: "\f",15 ...

原生JavaScript实现对象的混合与克隆效果，带完整版解析代码[helpers.js]【代码】

前言：????????本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小生感激不尽。????????本篇文章为您分析一下原生JS的混合与克隆对象混合页面中如下需求var obj1 = {x: 1,y: "a" }var obj2 = {x: "b",o: 6 }<div style="background-color: rgba(0,255,255,0.5)";>页面上有两个对象我们要把这两个对象混合成一个形成如下结构：

浏览器解析JavaScript原理（1）【代码】

特点: 　　　　1、跨平台　　　　2、弱类型：JavaScript 定义的时候不需要定义数据类型,数据类型是根据变量值来确定的　　　　　　强类型：定义变量的时候需要定义变量的类型：例如java,C#中的int a = 10 boolean a = true，直接确定了数据类型　　　　3、解释执行，逐行执行　　　　　　JavaScript 执行过程 1、语法检测看你有没有基本的语法错误,例如中文,关键字错误　　　　　　　　　　　　　　　...

javascript各种模式解析【代码】

1、工厂模式；工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程（后面还将讨论其他设计模式及其在JavaScript 中的实现）。考虑到在ECMAScript 中无法创建类，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节，如下面的例子所示。function createPerson(name, age, job) {var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function() {alert(this.name)}...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【js插件dropload上拉下滑加载数据实例解析】教程文章相关的互联网学习教程文章

加载 - 相关标签

实例 - 相关标签

数据 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程