滚动 下拉简单实现分页

最新推荐文章于 2024-07-24 14:58:19 发布
最新推荐文章于 2024-07-24 14:58:19 发布
阅读量2.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujucai/article/details/86575407
版权

1. 需要分页的jsp页面 添加滚动下拉触发事件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../init.jsp"%>
<!DOCTYPE html>
<html>
    <head>    
    <%@include file="../head.jsp"%>
    <title>康复之家</title>    
    <link rel="stylesheet" href="<%=basePath %>weixin/css/me.css">
    <script type="text/javascript" src="<%=basePath%>res/js/layer/layer.min.js"></script>
    </head>
    <body id="arrderTitle">
         <div class="banner">
            <img src="<%=basePath%>weixin/img/kangf.png" alt="">
        </div>
      <%--   <div class="workSite clear" >
            <div class="clear" style="width:100%">
                <div class="picHome">
                    <img src="<%=basePath%>weixin/img/home.png" alt="">
                </div>
                <div class="workSiteP" style="width: 85%;" id="arrderTitle">
                    <c:if test="${COOPERATE!=null}">
                        <p id="arrder">地址：${COOPERATE.province}${COOPERATE.city}${COOPERATE.area}<span id="updateArea" class="fr" style="margin-left: 1rem; font-family: simsun;font-weight: 700;">></span></p>
                    </c:if>
                     <c:if test="${COOPERATE==null}">
                        <p id="arrder">地址：深圳市宝安区福永街道白石厦社区福永大道78号广福大厦707<span id="updateArea" class="fr" style="margin-left: 1rem; font-family: simsun;font-weight: 700;">></span></p>
                    </c:if>
                </div>
            </div>  
        </div> --%>
        <div class="workSite clear">
            <div class="picHome">
                <img src="<%=basePath%>weixin/img/home.png" alt="">
            </div>
            <div class="workSiteP">
                 <c:if test="${COOPERATE!=null}">
                        <p id="arrder">地址：${COOPERATE.province}${COOPERATE.city}${COOPERATE.area}</span></p>
                    </c:if>
                     <c:if test="${COOPERATE==null}">
                        <p id="arrder">地址：深圳市宝安区福永街道白石厦社区福永大道78号广福大厦707</span></p>
                    </c:if>
            </div>
            <span  class="fr">></span>
        </div>
        <div class="clear workTips">
            <div class="clear" style="width:100%">
                <div class="picHome">
                    <img src="<%=basePath%>weixin/img/peo.png" alt="">
                </div>
                <div class="workSiteP">
                    <p id="name">负责人：${COOPERATE.name==null?'王博伟':COOPERATE.name}&nbsp;&nbsp;手机号：${COOPERATE.phone==null?'13607671755':COOPERATE.phone}</p>
                    <p id="size">病友数量：${USERSIZE==null?'0':USERSIZE}</p>
                </div>
            </div>
        </div>
        
        <div id="myActivesList" style="margin-bottom: 1.7rem;">
            <p class="mcDiscussT" style="padding-left: 0.5rem;"><span>热门活动</span></p>
            <div class="bot10" >
             <ul class="medicineul">
                <c:forEach  items="${rows}" var="list">
                   <li>
                        <a href="<%=basePath%>weixin/cooperate/lydActivityCtl/recoryActiveDetail.cs?id=${list.id}">
                           <img src="${list.img}" alt="" class="medicineImg">
                            <div class="medicineTxt fl">
                                 <p class="yaoT">${list.title}</p>
                                 <p class="lightxt" style="font-size:0.3rem;margin-top:0.2rem;">
                                     <span><fmt:formatDate value="${list.modifyDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>  
                                     <span>${list.readcount}人浏览</span>
                                 </p>
                            </div>
                        </a>
                    </li>
                 </c:forEach>
               </ul>
           </div>
        </div>
        <input type="hidden" name="province" id="province" value=""/>
        <input type="hidden" name="city" id="city" value=""/>
        <input type="hidden" name="area" id="area" value=""/>
        <input type="hidden" name="provinceId" id="provinceId" value=""/>
        <input type="hidden" name="cityId" id="cityId" value=""/>
        <input type="hidden" name="areaId" id="areaId" value=""/>
         <!-- 弹窗选择城市 -->
        <div class="joinmask nodisplay">
            <div class="citycontent">
                <div class="btnBar">
                    <div class="fl cityCancel"> 取消</div>
                    <div class="fr bluetxt">确定</div>
                </div>
                <div class="wheels">
                    <div class="wheel wheel_province">
                        <ul >
                        </ul>
                    </div>
                    <div class="wheel wheel_city">
                        <ul class="selectContainer">
                        </ul>
                    </div>
                    <div class="wheel wheel_area">
                        <ul class="selectContainer">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        $(function(){
            var status="${USER.status}";
           <%--  if(status=="0"){
                window.location.href = '<%=basePath%>weixin/patient/lydUserCtl/myWork.cs';
            } --%>
            $(".meTabs a").each(function(){
                $(this).click(function(){
                    $(".meTabs a").removeClass("current");
                    $(this).addClass("current");
                })
            })
        })
    </script>
    <script type="text/javascript">
   scroll
            var page=1;
            var totalpage="${pageTotal}";
            var    pageSize="${pageSize}"
            var totalheight=0 ;
            var totalheight2=0 ;
            $(window).scroll(function(){
                   totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  
                  if($(document).height() == totalheight){
                    page++;
                  if(page<=totalpage){
                          $.ajax({
                              type: 'get',
                              url: 'recoryHasfamilyList.cs?pageSize='+pageSize+'&page='+page,
                              dataType:"html",
                              data:"",
                              success: function(html){
                                  $('.medicineul').append(html);
                             }
                        });
                  }else{
                      page =  totalpage ;
                  }
                 }
            });
    </script>
 <!-- 地址js -->
 <script type="text/javascript">
    // 城市联动切换效果
    $("#updateArea").click(function(){
        $(".wheel_province ul").html('');
        $(".wheel_city ul").html('');
        $(".wheel_area ul").html('');
           $.get('<%=basePath%>area/getProvice.cs',function(data){
               var html = "";
               for(var i in data){
                   html += "<li id="+data[i].code+" οnclick='cityCode(\""+data[i].code+"\",\""+data[i].name+"\")'>";
                   html += data[i].name;
                   html += "</li>";    
               }
               $(".wheel_province ul").html(html);
           });
        $(".joinmask").show(200);
    })
     //获取联动市级
     function cityCode(code, name){
        $(".wheel_city ul").html('');
        $(".wheel_area ul").html('');
         $.get('<%=basePath%>area/getByParentCode.cs',{'param': code}, function(data){
               var html = "";
               for(var i in data){
                       html += "<li id="+data[i].code+" οnclick='areaCode(\""+data[i].code+"\",\""+data[i].name+"\")'>";
                       html += data[i].name;
                       html += "</li>";
               }
               $(".wheel_city .selectContainer").html(html);
        });
    }
    //获取联动市级
     function areaCode(code, name){
        $(".wheel_area ul").html('');
         $.get('<%=basePath%>area/getByParentCode.cs',{'param': code}, function(data){
               var html = "";
               for(var i in data){
                       html += "<li id="+data[i].code+" >";
                       html += data[i].name;
                       html += "</li>";
               }
               $(".wheel_area .selectContainer").html(html);
        });
    }
    //取消按钮
     $(".cityCancel").click(function(){
         $(".joinmask").hide(200);
     })
    //确定按钮  
     $(".bluetxt").click(function(){
        if($(".wheel_province .current").text()!="" && $(".wheel_city .current").text()!="" && $(".wheel_area .current").text()!=""){
            $("#arrder").html($(".wheel_province .current").text()+'&ensp;'+$(".wheel_city .current").text()+'&ensp;'+$(".wheel_area .current").text());
            //$("#arrderTitle").html($(".wheel_area .current").text()+'肿瘤康复之家<img id="updateArea" src="<%=basePath%>weixin/img/toggle.png" alt="" style="width: 0.35rem;margin-left: 0.3rem;">');
               $(".joinmask").hide(200);
            $("#province").val($(".wheel_province .current").text());
            $("#city").val($(".wheel_city .current").text());
            $("#area").val($(".wheel_area .current").text());
            $("#provinceId").val($(".wheel_province .current").attr("id"));
            $("#cityId").val($(".wheel_city .current").attr("id"));
            $("#areaId").val($(".wheel_area .current").attr("id"));
            
            var obj=new Object();
             obj.id="${USER.id}";
             obj.province=$("input[name='province']").val();
             obj.provinceId=$("input[name='provinceId']").val();
             obj.city=$("input[name='city']").val();
             obj.cityId=$("input[name='cityId']").val();
             obj.area=$("input[name='area']").val();
             obj.areaId=$("input[name='areaId']").val();

             $.post('<%=basePath%>weixin/cooperate/lydUserCtl/certificationAdd.cs', {"data" : JSON.stringify(obj)}, function(data) {
                     if (data.ret == 1) {
                        layer.msg("修改地区成功！", {
                            time: 1000
                        },function(){
                            window.location.href = '<%=basePath%>weixin/cooperate/lydUserCtl/recoryHasfamily.cs';
                        });
                     }else{
                         layer.msg(data.msg);
                     }
             }, "json");
        }else{
            $(".joinmask").hide(200);
        }
     })
     $(".wheel_province").on("click","ul li",function(){
            $(".wheel_province li").removeClass("current");
            $(this).addClass("current");
            $(".wheel").css("width","30%");
     })

     $(".wheel_city").on("click","ul li",function(){
          $(".wheel_city li").removeClass("current");
          $(this).addClass("current");
     })
     
     $(".wheel_area").on("click","ul li",function(){
          $(".wheel_area li").removeClass("current");
          $(this).addClass("current");
     })
    </script>
</html>

2.controller层
 

    @RequestMapping("recoryHasfamilyList")
    public String recoryHasfamilyList(String page, String pageSize, HttpServletRequest request, ModelMap mm) {

                Pager pager = new Pager();
                    pager = this.lydActivityDao.queryLydActivitys(new Pager(Integer.valueOf(page == null ? "1" : page),
                            Integer.valueOf(pageSize == null ? "10" : pageSize)), null);
                
                mm.put("rows", pager.getResults());
                mm.put("total", pager.getTotal());
                mm.put("pageTotal", pager.getPageTotal());
                mm.put("pageSize", pager.getPageSize());

                mm.put("USER", user);
            }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "weixin/cooperate/recory-hasfamilylist";
    }

 

3.ajax返回一个页面 拼接到第一个jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@include file="../head.jsp"%>
 			 	<c:forEach  items="${rows}" var="list">
	               <li> 
	              		<img src="${list.img}" alt="">
	                    <a href="<%=basePath%>weixin/cooperate/lydActivityCtl/recoryActiveDetail.cs?id=${list.id}"> 
	                        <div class="fl payTxt">
			                     <p class="yaoT">${list.title}</p> 
			                     <p class="yaoB lightxt">
			                         <span><fmt:formatDate value="${list.modifyDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>  
			                         <span>${list.readcount}人浏览</span>
			                     </p>
			                </div>
	                    </a>
	                </li>
	             </c:forEach>

 

 

河上街
关注
用JavaScript实现分页功能
qq_52530691的博客
07-01 1780
用JavaScript实现分页功能
页面滚动分页---iScroll实例：下拉刷新，滚动翻页
08-10
动态滚动加载数据 页面滚动分页---iScroll实例：下拉刷新，滚动翻页
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 798
vue3——利用自定义指令实现下拉框分页懒加载
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
热门推荐
wocwin的博客
02-28 1万+
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
jsp带有下拉框的分页
10-27
jsp分页，第一页，上一页，下一页，最后一页，文本框显示每页几条记录，用户可以更改，下拉框显示第几页，选择更改当前页数。
jsp页面带有下拉框的分页
03-15
jsp页面带有下拉框的分页
下拉 分页
inmarry的博客
09-27 167
1、先在data里面定义变量 allLIst 表示请求接口收到的数据； loadNextPage 表示是否进入下一页； 2、在mounted里面监听分页滚动条 //分页监听滚动条 window.addEventListener("scroll", this.handleScroll); 3、 在methods里面写handleScroll方法 //分页——滚动条触碰到底部...
Android中RecyclerView实现分页滚动的方法详解
08-30
本文将详细介绍如何在RecyclerView中实现分页滚动，以满足用户翻页浏览的需求。分页滚动不仅包括逐页向下滚动，还应支持直接跳转到指定页的功能。 首先，我们需要了解分页滚动的基本需求。在本例中，应用需要展示一...
jquery 实现滚动条下拉时无限加载的简单实例
11-22
总结来说，jQuery 实现滚动条下拉时无限加载的核心步骤包括： 1. 监听滚动事件。 2. 当达到特定滚动位置时，发送异步请求获取新数据。 3. 处理返回的数据，生成 HTML，并插入到页面适当位置。 4. 更新状态变量，以...
Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）
01-04
但要加上顶部下拉指示器、滚动条，并封装成可简单调用的组件，着实花了我不少精力：） 先给大家展示下效果图： 【功能】 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky....
AjAX+Jquery实现滚动条下拉分页
lyylxx的博客
07-13 1617
两者都是在某一个元素的内部添加内容。 区别在于：append是在原有基础上增加，html中是替换当前所有内容 <script> <!-- 实现滚动条滚动start --> var pageNum = 1; // 当前页码 var pageSize =10; // 当前每页条数 var pageCount=0;//总页数 var winH = $('#div1').height();//页面可视区域高度 var p=0, t=0; // 顶部和底部的
Iscroll滚动分页
01-19
基于IScroll 封装的分页插件，是基于IScroll 5.0.3版本的资源
jQuery漂亮滚动分页示例插件(jPaginate)
12-13
jQuery漂亮滚动分页示例插件(jPaginate)
分页通过下拉框选择每页显示的个数
06-22
使用mybatis和springMVC开发的分页，功能：分页+模糊查询、通过下拉框选择每页显示的个数
javascript 滚动分页
闲言闲语
01-21 235
由于这两天项目用到滚动分页 ，所以写了个处理滚动分页的js类 备用吧当,调用只需 new ScrollPage({...});//配上相应参数就好了。。。 [code="java"]function ScrollPage(config){ this.config = config; this.defaultLoadingTemplate = "努力加载中..."; ...
滚动条下拉进行分页请求数据
zyqgt960812的博客
08-11 754
需求说明 一个公告页面，如果一次性请求所有数据必定会造成页面卡顿， 所以将接口设置成分页模式，按照每页请求 <a-list item-layout="horizontal" :data-source="data" class="list" @scroll.passive="getScroll($event)"> <a-list-item slot="renderItem" slot-scope="item" @click="godetail(item.id)" style="cu.
无限滚动分页加载与下拉刷新技术探析：原理深度解读与实战应用详述
JINGWHALE
04-21 1449
本文详述了无限滚动分页加载与下拉刷新技术的原理，并以实战示例实际应用。下拉分页加载（也称为无限滚动、滚动加载、滚动分页）是一种常见的Web和移动端应用界面设计模式，用于在用户滚动到底部时自动加载下一页内容，而无需点击传统的分页按钮。这种设计旨在提供更加流畅、连续的浏览体验，减少用户交互步骤，尤其适合内容丰富的列表或瀑布流布局。
ajax下拉分页
HD2killers的博客
05-16 1911
ajax分页 $(function () { // 滚动监听 var pag = 1; window.onscroll=function(){ pag++; var a = document.documentElement.scrollTop==0? document.body.clientHeigh...
滚动分页，页面滚动到底部
Zxf_xcn的博客
03-04 358
滚动分页 //element中table的ref通过bodyWrapper获取 //普通标签把bodyWrapper去掉 function loadMore (refName,curPage,totalPage,callback) { let box = refName ? this.$refs[refName].bodyWrapper : document.body;//获取监听元素 box.addEventListener("scroll", () => { // 监听滑动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值