Html5模擬android上拉/下拉重新整理
阿新 • • 發佈:2018-12-31
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/tld/taglibs.jsp"%> <%@page import="cn.com.jsoft.global.Global"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link href="css/tyjlb.css" rel="stylesheet" media="all" type="text/css" /> <script src="js/dragloader.js"></script> <script type="text/javascript" src="/admin/js/jquery-1.8.2.js"></script> </head> <body> <!--page_start--> <div class="page"> <!--main_start--> <div class="main"> <!--banner_start--> <div class="banner clear-fix"> <ul> <c:forEach items="${imgClubList}" var="img"> <li><a href="${img.url }"><img src="${basePath }${img.uploadaddress}"></a></li> </c:forEach> </ul> </div><!--banner_end--> <!--main_news_start--> <div class="new clear-fix"> <!-- newList_bigTitleType_start --> <div class="new-title clear-fix"> <div class="new-title-left">最新活動 </div> <div class="new-title-middle"> <span class="new-title-line"></span> </div> <div class="new-title-right" onclick="location.href='${basePath}/public/sjkf/clubcolumn/columnList.jspx?${ urlParam}&mobile=${mobile }'">更多<img src="images/zxhd_more.png"> </div> </div><!-- NewList_BigTitleType_end --> <!--newList_start--> <div class="new-list clear-fix"> <!--newlist_main_start--> <ul class="new-list-main" id="list_main"> <c:forEach items="${finalClubDataList}" var="item"> <li> <a href="${item.url }"> <!--NewList_L_Img--> <div class="new-list-l"><img src="${basepath }${item.uploadaddress}"></div> <!--NewList_R_main--> <div class="new-list-r"> <!--NewList_R_title--> <h2 class="h2-font">${item.title }</h2> <!--NewList_R_main--> <p> <c:if test="${fn:length(item.introduce) >= 107}"> ${fn:substring(item.introduce,0,107) }... </c:if> <c:if test="${fn:length(item.introduce) < 107}"> ${item.introduce } </c:if> </p> <!--NewList_R_tag--> <span class="tag"><img src="${basePath }${item.sLogo}"></span> </div> </a> </li> </c:forEach> </ul><!--NewList_main_end--> <div id="sp1" class="new-list-more" style="display:none">已無更多資料</div> </div><!--newlist_end--> </div><!--main_news_end--> <!--up_slide_start--> <div id="up-refresh" class="new-list-more"> <span class="up-refresh-ico"></span> <span class="up-refresh-text" onclick="ajaxChangePage()">向上滑動載入更多資料</span> </div><!--up_slide_end--> <!--滑動指令碼--> <form method="post" action="" id="theForm" enctype="multipart/form-data"> <input type="hidden" id="prov" name="prov" value="${prov }" /> <input type="hidden" id="mobile" name="mobile" value="${mobile }" /> <input type="hidden" id="urlParam" name="urlParam" value="${urlParam }" /> <input type="hidden" id="pageIndex" name="pageIndex" value="2" /> </form> <script type="text/javascript"> (function() { var uprefresh=document.getElementById('up-refresh'); var downrefresh=document.getElementById('down-refresh'); var list_main = document.getElementById('list_main'); var dragger = new DragLoader(document.getElementsByClassName('main')[0], { dragDownThreshold:60,/*向下滑動區域*/ dragUpThreshold:20,/*向上滑動區域*/ dragDownRegionCls: 'DownRefresh',/*向下滑動樣式*/ dragUpRegionCls: 'UpRefresh',/*向上滑動樣式*/ disableDragDown: true, /*向下滑動時的狀態顯示*/ dragDownHelper: function(status) { if (status == 'default') { return '<div> <span class="down-refresh-ico"></span>向下滑動載入更多資料</div>'; } else if (status == 'prepare') { return '<div> <span class="down-refresh-ico flip"></span>鬆開載入更多資料</div>'; } else if (status == 'load') { return '<div> <span class="loading-img"></span>正在載入中,請稍後...</div>'; } }, /*[主要code]向上滑動時的狀態顯示*/ dragUpHelper: function(status) { uprefresh.querySelector('.up-refresh-ico').style.display='none'; if (status == 'default') { uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="up-refresh-ico"></span>向上滑動載入更多資料'; return ''; } else if (status == 'prepare') { uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="up-refresh-ico"></span>鬆開載入更多資料'; return ''; } else if (status == 'load') { uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="loading-img"></span>正在載入中,請稍後...'; return ''; } } }); dragger.on('dragDownLoad', function() { setTimeout(function() { /*備註:此處放置資料重新整理的指令碼,主要是新聞列表頁的 li */ // 無論何時,必須由業務功能主動呼叫reset()介面,以還原狀態 // 比如在onDragDownLoad()回撥中使用ajax載入資料時,在ajax的回撥函式中應當呼叫reset()重置drag狀態 // 如果不重置,drag操作將失效 dragger.reset(); //alert('down重新整理'); }, 500); }); dragger.on('dragUpLoad', function() { /*備註:此處放置資料重新整理的指令碼,主要是新聞列表頁的 li */ setTimeout(function() { dragger.reset(); ajaxChangePage(); }, 500); //list_main.innerHTML('asdasdasdasd'); //alert('up重新整理'); }); })(); function ajaxChangePage(){ var prov = $("#prov").val(); var pageIndex = $("#pageIndex").val();//下一頁就是第二頁 //alert('當前pageindex:'+pageIndex); var ip = '<%=Global.getProperty("tianyiClub_ip") %>'; //alert(ip); $.ajax({ data:$("#theForm").serialize(), url: ip + "/tianyiClub/changePage.jspx", type: 'POST', dataType: 'JSON', timeout: 5000, error: function() { alert('翻頁失敗!'); }, success: function(msg) { //記下當前是第幾頁了 $("#pageIndex").attr("value",(pageIndex-0+1));//很奇怪,直接+1居然變成11; //alert("翻頁後pageIndex"+$("#pageIndex").val()); //alert(eval(msg)); if(null == eval(msg)){ $("#up-refresh").attr("style","display:none"); $("#sp1").attr("style","display:block"); setTimeout(function() { $("#sp1").attr("style","display:none"); }, 1000); return; } $.each(eval(msg), function(i, item) { //alert(item.URL); var msg = "<li><a href='"+item.url+"'><div class='new-list-l'><img src='${basepath }"+item.uploadaddress+"'></div><div class='new-list-r'><h2 class='h2-font'>"+item.title+"</h2><p>"+substrStr(item.introduce)+"</p><span class='tag'><img src='"+item.sLogo+"' /></span></div></a></li>"; $("#list_main").append(msg); }); } }); } function substrStr(Str){ var i,len,code; if(Str==null || Str == "") return 0; len = Str.length; for (i = 0;i < Str.length;i++) { code = Str.charCodeAt(i); if (code > 255) {len ++;} } if(len >=107){ return Str.substr(0,107)+"..."; }else{ return Str; } } </script> <!--<input type="button" value="我來觸發ajax" onclick="ajaxChangePage()" /> --></div><!--main_end--> </div><!--page_end--> </body> </html>
特別說明:
將ajax獲取到的資料填充到dragger中,即可模擬!
dragloader.js是一個面向移動Web開發的JavaScript庫,幫助開發者在使用頁面原生滾動時,模擬上/下拉手勢,實現Pull to Request操作。