jsp手机端网页实现下拉刷新，上拉加载 

实现代码如下：（js控制代码）
 1 var loading = false;
 2     $(document.body).infinite().on("infinite", function() {
 3         $("#loadingID").css("display","");
 4         if(loading)return;
 5         loading = true;
 6         setTimeout(function() {
 7         var pageNo=parseInt($("#currPage").val(),10)+1;
 8             searchData(pageNo);
 9             loading = false;
10         }, 1000);
11     });
12     
13     $(document.body).pullToRefresh().on("pull-to-refresh",function(){
14         setTimeout(function(){
15             $("#tbodyGrid").html("");
16             searchData(1);
17             $(document.body).pullToRefreshDone();
18         },1000);
19     });

jsp页面控制代码：

<div class="weui-pull-to-refresh-layer">
    <div class='pull-to-refresh-arrow'></div>
    <div class='pull-to-refresh-preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
</div>


<div class="weui-infinite-scroll"  id="loadingID" >
    <div class="infinite-preloader"></div>
    正在加载
</div>

demo在下面有链接（解压密码：demo）：

 https://files.cnblogs.com/files/shitou5e/demo.zip

posted @ 2016-12-06 11:22  一个人的北京S  阅读(4310)  评论(1)  编辑  收藏  举报