遇到的問題：上拉到底部后直接下拉，會緊接着執行上拉操作，顯示兩頁
處理方法：如圖,
代碼只是為了測試我出現的問題
代碼：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());
} |
