<%@ 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中，即可模拟！
需要的js：https://github.com/maxzhang/dragloader/blob/master/dragloader.js
参考地址：maxzhang/dragloader
dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生滚动时，模拟上/下拉手势，实现Pull to Request操作。
但我想说，我做了一个善良的平凡女子，并且一直在爱，
