java h5 上拉加载更多_Jquery 实现H5页面上拉加载更多

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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值