Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll、mui、isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果开发页面不是全局下拉刷新时,在IOS、Android上会出现卡顿及无法拉动的情况,因此感觉某些插件不适合做局部刷新,于是想用Jquery实现在移动端的上拉加载更多功能,在实现之后感觉还不错哒,在此记录一下自己的成果,嘻嘻(#^.^#)。
首先根据产品需求写出页面布局:如下图:
功能需求是点击母婴用品列表切换类别,并实现上拉加载数据。
我的思路是通过点击Tab请求不同数据加载,监听 $(window).scroll(function(){}) 事件,当屏幕滑动到底部时,分页加载,此处功能代码如下:
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 if(scrollTop + clientHeight >= scrollHeight - 50){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 注:-50 上拉加载更灵敏 //加载数据 } });
理清思路,具体业务逻辑js代码如下:
var pageAjax = {
pageNo : 1, pageSize : 10, loader : $(".mui-loading"), //加载中 endText : $(".mui-end"), //结束 loadMore : $(".mui-more"), //加载更多 promotion_id : $("input[name='promotion_id']").val(), curNavIndex : $(".pro-top .active").data('id'), shiftNav : $(".product-search .pro-top").find("li"), throttle : function(func,delay){ //延缓滚动加载次数 防止抖动 var timer = null; var startTime = Date.now(); return function(){ var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining <= 0){ func.apply(context,args); startTime = Date.now(); }else{ timer = setTimeout(func,remaining); } } }, getDataInit : function(dataId){ mui.ajax("{:url('Specialactivity/catGoodsList')}",{ data:{ num : pageAjax.pageSize, page : pageAjax.pageNo, cat_id : dataId, promotion_id : pageAjax.promotion_id }, dataType:'json', type:'post', timeout:10000, headers:{'Content-Type':'application/json'}, beforeSend:function(){ pageAjax.loader.show(); pageAjax.loadMore.hide(); pageAjax.endText.hide(); }, success:function(data){ var listData=[]; //console.log(data); pageAjax.loader.hide(); if(data.code == 200){ var list = data.data; var html = $("#goodsTemp").render(list); $("#dataList").append(html); pageAjax.loadMore.show(); } if(data.code == 400){ pageAjax.endText.show(); pageAjax.loader.hide(); pageAjax.loadMore.hide(); } }, error:function(data){ console.log(data); } }); }, clickAjax : function(){ pageAjax.shiftNav.on("tap",function(){ pageAjax.pageNo = 1; //重置页码为1 $("#dataList").html(""); //清空容器内容
pageAjax.loadMore.hide(); //清空加载更多 var cat_id = $(this).data("id"); //获取类别id $(this).addClass("active").siblings("li").removeClass("active"); pageAjax.getDataInit(cat_id); }); }, scrollFuc : function(){ $(window).scroll(pageAjax.throttle(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 if(scrollTop + clientHeight >= scrollHeight - 50){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 if($(".mui-end").is(":hidden")){ pageAjax.pageNo++; var cat_id = $(".pro-top").find("li.active").data("id"); pageAjax.getDataInit(cat_id); }else{
pageAjax.loadMore.hide();
} } },2000)); } }; $(function(){ mui.init(); $.views.settings.delimiters("<%", "%>");
$.views.converters({
parseNum: function(value){
return parseInt(value);
}
});
$(".mui-loading,.mui-end").hide();
pageAjax.clickAjax();
pageAjax.scrollFuc();
pageAjax.getDataInit(pageAjax.curNavIndex);
});
HTML代码如下:
<div class="product-search"> <ul class="pro-top"> <li class="" data-id="3">母婴用品</li> <li data-id="7" class="active">居家生活</li> </ul> </div> <div class="pro-bottom"> <ul id="dataList" ></ul> <div class="mui-loading"> <div class="mui-spinner"></div> </div> <div class="mui-more"> <p style="text-align: center;font-size: 10px;">-- 上拉加载更多 --</p> </div> <div class="mui-end"> <p style="text-align: center;font-size: 10px;">-- 我是有底线的 --</p> </div> </div>
业务逻辑很简单,关键在于scroll事件的去抖动: pageAjax.throttle() 、
上拉加载的条件: if($(".mui-end").is(":hidden")) ,这样就实现了上拉加载更多的功能啦~
此文章旨在记录思路O(∩_∩)O啦啦~~