Jquery 實現H5頁面上拉加載更多

時間 2019-11-11

標籤 jquery 實現 h5 頁面加載更多欄目 JQuery 简体版

原文原文鏈接

　　在最新的H5開發項目中，須要開發上拉加載更多的功能，如何實現上拉加載更多，網上有不少插件能夠實現，如：mescroll、mui、isScroll等等，最初我也是選擇了使用插件，但在使用過程當中發現了若是開發頁面不是全局下拉刷新時，在IOS、Android上會出現卡頓及沒法拉動的狀況，所以感受某些插件不適合作局部刷新，因而想用Jquery實如今移動端的上拉加載更多功能，在實現以後感受還不錯噠，在此記錄一下本身的成果，嘻嘻(#^.^#)。html

　　首先根據產品需求寫出頁面佈局：以下圖：ajax

　　功能需求是點擊母嬰用品列表切換類別，並實現上拉加載數據。json

　　個人思路是經過點擊Tab請求不一樣數據加載，監聽 $(window).scroll(function(){}) 事件，當屏幕滑動到底部時，分頁加載，此處功能代碼以下：app

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();    //滾動條距離頂部的高度
    var scrollHeight = $(document).height();   //當前頁面的總高度
    var clientHeight = $(this).height();    //當前可視的頁面高度
    if(scrollTop + clientHeight >= scrollHeight - 50){   //距離頂部+當前高度 >=文檔總高度 即表明滑動到底部 注：-50 上拉加載更靈敏
             //加載數據
    }
});

　　理清思路，具體業務邏輯js代碼以下：ide

    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>