移动端网页如何实现加载更多分页

移动端网页如何实现加载更多分页实例代码如下
jq
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
// console.log(“top:”+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
if(scrollTop + clientHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度即代表滑动到底部 count++; //每次滑动count加1
alert(“上拉加载…请稍等”);
//filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法，count为当前分页数
}else if(scrollTop<=0){
//滚动条距离顶部的高度小于等于0 TODO
//alert(“下拉刷新，要在这调用啥方法？”);
}
});

             <div id="zpro-list"></div>    var parms;page = 1,size = 5;loadOrder()// 列表加载方法函数function loadOrder() {parms = {"wxGzhopenid": wxGzhopenid,"pageNo": page, //当前页"pageSize": size //每页条数}$.ajax({"url": serurl + "txnservice/distribution/getDirectDisbuteList","type": "POST","contentType": "application/json","data": JSON.stringify(parms),"dataType": "json","beforeSend": function(resp) {$(".loading").show();},"success": function(data) {console.log(data);$(".loading").hide();if(data.resultCode == '000000') { //赋值回显if(data.nextCount == 0) {$("#nepro").css('display', "none");}if(data.data.length == 0) {if(page == 1) {$("#zpro-list").css('display', "block");$('#zpro-list').html('<div class="empty" style="display:flex;"><img src="data:images/empty.png" /><p>暂无数据哦。</p></div>');} else {settimeWarn(".error_wrap");$(".errorp").html('已加载全部数据');}} else {page += 1;var data = data.data;showzproList(data);}} else {$("#zpro-list").css('display', "block");$('#zpro-list').html('<div class="empty" style="display:flex;"><img src="data:images/empty.png" /><p>暂无数据哦。</p></div>');//                                settimeWarn(".error_wrap");
//                              $(".errorp").html(data.resultDesc);}}});}//滚动时，加载  var loadAll = false,lock = false;$(window).scroll(function() {var curHeight = $('body').scrollTop() + $(window).height();var totalHeight = $(document).height();if(curHeight >= totalHeight && !loadAll) {if(lock) {return;}lock = true;setTimeout(function() {lock = false;}, 1000);loadOrder()}});// 订单列表function showzproList(data) {if(data.length) {var htmlStr = '';for(var i = 0, len = data.length; i < len; i++) {htmlStr += '<ul>' +'<li class="zli">' +'<span class="left">借款人</span>' +'<span class="right">' + data[i].userName + '</span>' +'</li>' +'<li>' +'<span class="left">借款公司</span>' +'<span class="right">' + data[i].loancompany + '</span>' +'</li>' +'<li>' +'<span class="left">申请金额</span>' +'<span class="right">¥' + data[i].capital + '</span>' +'</li>' +'<li>' +'<span class="left">申请时间</span>' +'<span class="right">' + data[i].applyday + '</span>' +'</li>' +'<li>' +'<span class="left">申请状态</span>'}$('#zpro-list').append(htmlStr);} else {loadAll = true;}}

移动端网页如何实现加载更多分页相关推荐

php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...
JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
vue 移动端实现上拉加载更多
根据项目需求实现上拉加载更多-我用的是 vue-infinite-loading 插件实现的.下面是安装流程和使用方法:有需要直接拿去用第一步:安装 npm install vue-infinite ...
html5加载更多,HTML5[7]: 实现网页版的加载更多
VehicleCamera解读坐标系: z-axis ^ | | y-axis | / | / |/ +----------------> x-axis 围绕Z轴旋转叫做偏航角,Yaw:围绕X ...
Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
上拉加载更多后台数据_微信小程序端操作云数据库
一.分清几个概念 1.云开发,简言之就是可以直接用微信小程序开发者工具完成一个从前台到后台的小程序项目. 2.小程序端,使用云开发的时候,miniprogram中写的代码可以叫做小程序端(真实是我不知 ...
oracle里子连接查询,pc端页面滚动到底部加载更多数据......
场景:pc端页面鼠标滚动到底部时,通过ajax加载更多的数据,实现分页功能,封装成了一个函数,自己根据实际情况调用即可. 说明:discussList是放加载内容的div容器 // 加载更多评价的函数 ...
PC端滚动加载更多的实现方法
//滚动加载更多 var pullRefreshss = true; $(window).scroll(function () {/*当前滚动条到顶部的距离*/var top = $(document ...

移动端网页如何实现加载更多分页

移动端网页如何实现加载更多分页相关推荐

最新文章

热门文章