Html5模拟android上拉/下拉刷新

来源：互联网发布：sketch up mac 编辑：程序博客网时间：2024/06/05 20:43
<%@ 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：http://download.csdn.net/detail/xb12369/8918957
参考地址：maxzhang/dragloader
dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生滚动时，模拟上/下拉手势，实现Pull to Request操作。
0 4