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

Posted 一个人的北京S

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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):

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

以上是关于jsp手机端网页实现下拉刷新,上拉加载的主要内容,如果未能解决你的问题,请参考以下文章

关于h5手机端上拉加载和下拉刷新效果-1

手机端效果实现下拉刷新上拉加载更多数据---请求数据篇

vue中好用的下拉刷新、上拉加载插件mescroll.js

H5下拉刷新和上拉加载实现原理浅析

最详细的vue+vant的上拉加载,下拉刷新

小程序怎么实现下拉刷新