遇到的问题：上拉到底部后直接下拉，会紧接着执行上拉操作，显示两页
处理方法：如图,
代码只是为了测试我出现的问题
代码：jsp
| <%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/test2.js"></script>
<title>测试</title>
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="ul_id" >
<!-- <li style="font-size: 50px; margin-top: 20px;">测试</li> -->
</ul>
</div>
</div>
</body>
<script type="text/javascript">
mui.init({
pullRefresh : {
container : '#pullrefresh',
down : {
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback : pulldownRefresh
},
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore : '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback : pullupRefresh
}
}
});
function pulldownRefresh(){
// alert('下拉');
mui('#pullrefresh').pullRefresh().refresh(true);
setTimeout(function() {
$("#ul_id").html("");
test.pageNum = 1;
testFun1();
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
},300);
}
function pullupRefresh(){
setTimeout(function() {
testFun();
},200);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000); });
} else {
mui.ready(function() {
alert('ready');
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</html> |
js:
| var test={};
test.isflag = true;
test.pageNum = 1;
function testFun(){
// alert("testFun");
$.ajax({
url: "PageServlet",
data: {pageNum:test.pageNum},
dataType:"json",
success: function(data){
XSFX(data);
}});
}
function XSFX(data){
// alert(data.length);
if(data.length>0){
var appIndex = "";
for (var i = 0; i < data.length; i++) {
appIndex+='<li style="font-size: 50px; margin-top: 20px;">'+data[i]+'</li>';
}
$("#ul_id").append(appIndex);
if(data.length<2){
test.isflag=true;
mui('#pullrefresh').pullRefresh().endPullupToRefresh(test.isflag);
}else{
test.isflag=false;
mui('#pullrefresh').pullRefresh().endPullupToRefresh(test.isflag);
test.pageNum+=1;
mui('#pullrefresh').pullRefresh().refresh(true);
}
}
}
/**
* 下拉
*/
function testFun1(){
// alert("testFun1");
$.ajax({
url: "PageServlet",
data: {pageNum:test.pageNum},
dataType:"json",
success: function(data){
XSFX1(data);
}});
} function XSFX1(data){
// alert("XSFX1======="+data.length);
if(data.length>0){
var appIndex = "";
for (var i = 0; i < data.length; i++) {
appIndex+='<li style="font-size: 50px; margin-top: 20px;">'+data[i]+'</li>';
}
$("#ul_id").append(appIndex);
if(data.length<2){
}else{
test.isflag=false;
alert('是否是这句话起作用了');
mui('#pullrefresh').pullRefresh().endPullupToRefresh(test.isflag);
mui('#pullrefresh').pullRefresh().refresh(true);
test.pageNum+=1;
}
}
} |
servlet:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String page = request.getParameter("pageNum");//获取的页数
int par = Integer.parseInt(page);
int pp1 = (par-1)*2;
int pp2 = par*2;
// Integer pageCount = 2;//没有条数
List<String> list = new ArrayList<String>();
list.add("第一页1");
list.add("第一页2");
list.add("第二页1");
list.add("第二页2");
list.add("第三页1");
if(pp2 == 6){
pp2=5;
}
/*list.add("第三页2");
list.add("第四页1");
list.add("第四页2");
list.add("第五页1");
list.add("第五页2");*/
List<String> subList = list.subList(pp1, pp2);
response.setHeader("Content-type", "text/json;charset=UTF-8");
response.setContentType("UTF-8");
// System.out.println(subList.size());
JSONArray json = JSONArray.fromObject(subList);
response.getWriter().write(json.toString());
} |
