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啦啦~~

　　

转载于:https://www.cnblogs.com/boomupupup/p/9529220.html