滚动 下拉简单实现分页
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} 手机号：${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()+' '+$(".wheel_city .current").text()+' '+$(".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 blocke.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>滚动 下拉简单实现分页相关推荐
- 3D滚动下拉菜单-简直不要太任性
看到一个很棒的菜单效果,分享一下 原文 3D滚动下拉菜单-简直不要太任性 预览(先看看最终效果) http://runjs.cn/detail/re75abbw 简介(由来) 最初看到这个是在14年5 ...
- Android 博客园客户端 （八） 下拉刷新、分页，AsyncTask
一直以来,无论是博客.新闻.还是推荐用户列表.只能加载固定的数量,也没有刷新功能. 为了实现这个功能,也试过很多第三方的开源控件,如PullToRefreshListVie等.无意中发现了Google ...
- u3d实现滚动下拉(scrollview实现)
项目需要实现一个类似下拉的功能,就是在固定的显示区域无法完全显示你需要展示的内容,这时候就需要下拉功能了. 刚开始我想的是用listview来实现,因为也是刚刚开始接触的u3d,对它的各个插件也不什么 ...
- PHP+JS+HTML 手机下拉加载分页
HTML循环页面 can 视图容器参数 dir 传值(自定义) <div class="fhsj"><ul class="lbt" id=&q ...
- pyhon3模拟鼠标点击滚动下拉，键盘复制粘贴输入中文
安装包 pip install pyautogui pip install pyperclip pyautogui 更多参考官网:https://github.com/asweigart/pyauto ...
- vue移动端下拉加载分页全面解决方案
封装组件: <template><view class="zcPagination"><zc-u-toast></zc-u-toast&g ...
- 微信小程序实现下拉分页加载更多数据
1.使用scroll-view实现滚动下拉 wxml <scroll-view wx:if="{{plotArr.length > 0}}" scroll-y=&quo ...
- Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
- h5实现下拉刷新上拉加载（兼容iOS手机）
在移动端开发中经常会遇到上拉加载下拉刷新的分页的需求,本人在用jquery weui框架中的相应扩展组件的时候发现不太好用,于是有找了一下,发现了一个非常不错的组件iscroll4.js,现在好像官网 ...
最新文章
- Vue+element UI实现“回到顶部”按钮组件
- 电脑机时,电脑死机时，为啥会忍不住扇它一巴掌？
- 算法分析与设计之多处最优服务次序问题2
- Metasploit设置LHOST参数技巧
- 总结sqlserver数据库性能优化相关的注意事项
- Linux基础7 文件管理类命令
- 灵感编程：最大公约数算法解析
- elasticsearch 6.x.x 获取客户端方法
- java中arges.length_java中的args.length
- AutoComplete - 自动完成插件
- GraphQL入门之工程搭建
- Caddy Web服务器QUIC部署
- input file 上传问题
- 针对医疗数据进行命名实体识别
- 链表常见操作java实现一：链表初始化，求链表长度
- 纸牌游戏程序设计要点（C语言）
- 华为悦盒EC6108V9教程
- 图的应用--最小生成树
- 如何隐藏logo 高德地图api_iOS 高德地图隐藏logo
- 快速新建多个文件夹，而且是指定名称的！