页面上拉加载数据(也就是上拉实现分页)

谁借莪１个温暖的怀抱￠ 2022-05-10 14:10 207阅读 0赞

之所以发这个博客是因为网上百度了太多  没法直接套用  所以写这个   可以直接套用   先上代码截图

刚开始有几个参数，我说一下都什么参数

pageInfo.pages是总页数

pageInfo.pageNum是当前页

pageInfo.pageSize是每页的数量

至于下面的uid是我传的参数（这个不用管，根据自己的实际情况来取参传参）

然后这个代码基本上可以套用（但是要和Mybatis的PageHelper的分页插件使用，当然，你不用分页插件也行，手写分页也很厉害，不过建议用插件，因为确实很方便，同时页面上需要的参数都有了）

然后这段代码

$(function(){
        $(window).scroll(function () {
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
                pagenew = 2;
                page ++;
                if(page > mix){
                    return false;
                }else{
                    ajaxpage(uid,page,rows);
                }
            }
        });
    });

1：就是说   页面文档的高度减去当前滚动条的高度（就是滚动条底部距离屏幕最顶端的距离）和当前高度小于300px和当前页要要是分页的第一页，这些条件满足后，就会执行里面的方法，在这里我不多细说，只能给你说，套用上去就没问题（前提是能看懂js代码，不能代码给你了，什么都看不懂就瞎套，当然后台需要自己写，不会的话可以留言）这些工作做完后，就开始执行js方法

2：就是这个方法

ajaxpage(uid,page,rows);

这个方法在上面代码里面写的有，我说一下这个js方法代码的重点，下拉刷新肯定是异步的，所以说要用JQuery的ajax方法，然后把需要显示的数据拼接上去   注意是拼接数据   这里需要用js的forEach循环（不会的话就百度一下），然后把你页面上需要的字段拼接上去，拼接这一步很考验耐心，稍微不注意，页面就炸

3：最后用jQuery的

$("#road").append();
    //括号里面写你要往页面上加的数据   也就是拼接的数据    
    //至于$("#road")这个就是告诉jQuery往页面上哪个节点（注意是节点）上添加数据  
    //如果这个都不懂  那还是先看jQuery的$("").append();方法吧   看明白了再回来看这个

至此  js已经写完    有很多人会有疑问    那页面上究竟是什么样子的   （怎么去拼接呢？）  那我把页面上的代码也贴出来

<ul class="workul" id="road">
    			<c:choose>
    			<c:when test="${!empty pageInfo.list}">
    			<c:forEach items="${pageInfo.list}" var="item">
    			<li>
    				
    					<c:choose>
    					<c:when test="${item.workliststate==1}">
    						<a class="workdes" href="workdetail.html?customerid=${item.cid}&worklistnumber=${item.worklistnumber}">
    					</c:when>
    					<c:when test="${item.workliststate==2||item.workliststate==3}">
    						<a class="workdes" href="workconduct.html?id=${item.id}&customerid=${item.cid}">
    					</c:when>
    					</c:choose>
    					<div class="workdescon">
    						<p class="work_tit">${item.customername}</p>
    						<span class="work_num">工单编号：${item.worklistnumber}</span>
    						<span class="work_time"><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
    					</div>
    				</a>
    				<c:choose>
    					<c:when test="${item.workliststate==1}">
    						<a class="worklistbtn wc_btn" href="workconduct.html?id=${item.id}&customerid=${item.cid}">去开工</a>
    						<a class="worklistbtn wc_btnfc" href="index.html?wid=${item.id}&uid=${item.userweiceid}">废除</a>
    					</c:when>
    					<c:when test="${item.workliststate==2}">
    						<input type="hidden" id="workliststatetwo" value="2">
    						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>
    					</c:when>
    					<c:when test="${item.workliststate==3}">
    						<input type="hidden" id="workliststate" value="3">
    						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>
    					</c:when>
    				</c:choose>
    			</li>
    			</c:forEach>
    			</c:when>
    			<c:when test="${empty pageInfo.list}">
    				<center style="padding:30% 0;color:#999;">你还没有工单哦~</center>
    			</c:when>
    			</c:choose>
    </ul>

注意jsp页面上的C标签   在js里面就不能用C标签去遍历数据  而是要用js的forEach

至此    页面上拉实现加载数据  就完成了   不过我后台是用分页插件   网页面上发送   pageInfo这个数据  因为分页插件太好用了  分页插件里面每个参数啥意思   我博客里面也有   有看不懂的  可以留言

我把后台写ajax的类也贴上来    这样就真的可以套用了

public class AjaxMessage<T> {
    	
    	 public AjaxMessage(){}
    	 
    	 public AjaxMessage(boolean is,String msg,T data){
    		 this.msg = msg;
    		 this.data = data;
    		 this.is = is;
    	 }
    	
    	/**
    	 * 提示信息
    	 */
    	private String msg;
    	
    	/**
    	 * 返回的数�?
    	 */
    	private T data;
    	
    	/**
    	 * 是否成功
    	 */
    	private boolean is = false;

然后生成一下get/set方法就行了