在最新的H5开发项目中，需要开发上拉加载更多的功能，如何实现上拉加载更多，网上有很多插件可以实现，如：mescroll、mui、isScroll等等，最初我也是选择了使用插件，但在使用过程中发现了如果开发页面不是全局下拉刷新时，在IOS、Android上会出现卡顿及无法拉动的情况，因此感觉某些插件不适合做局部刷新，于是想用Jquery实现在移动端的上拉加载更多功能，在实现之后感觉还不错哒，在此记录一下自己的成果，嘻嘻(#^.^#)。
在最新的H5开发项目中，需要开发上拉加载更多的功能，如何实现上拉加载更多，网上有很多插件可以实现，如：mescroll、mui、isScroll等等，最初我也是选择了使用插件，但在使用过程中发现了如果开发页面不是全局下拉刷新时，在IOS、Android上会出现卡顿及无法拉动的情况，因此感觉某些插件不适合做局部刷新，于是想用Jquery实现在移动端的上拉加载更多功能，在实现之后感觉还不错哒，在此记录一下自己的成果，嘻嘻(#^.^#)。
首先根据产品需求写出页面布局：如下图：
功能需求是点击母婴用品列表切换类别，并实现上拉加载数据。
$(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>pageAjax.throttle()
if($(".mui-end").is(":hidden"))
此文章旨在记录思路O(∩_∩)O啦啦~~
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
