dropload插件的使用（上拉下滑加载数据）

最新推荐文章于 2024-03-17 17:28:50 发布

peter_qyq

最新推荐文章于 2024-03-17 17:28:50 发布

阅读量1.8w

点赞数 2

分类专栏： JavaScript/Jquery 文章标签： javascript 插件

本文链接：https://blog.csdn.net/peter_qyq/article/details/52037132

版权

JavaScript/Jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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.error(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}</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><!--引用插件js-->
</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>

效果图

peter_qyq

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
dropload插件的使用（上拉下滑加载数据）

1.导入jsdropload.min.jszepto.min.js 2.后台查询/** * 我找的劵 * * @return */ @Action("IFindTicket") public String IFindTicket() { try { FuTransaction transaction = fuTransactionSer
复制链接

扫一扫

专栏目录