HTML5 Mall develop a floor rolling load data

Why 80% of the code can not do farming architect? >>>  

For floor loading was only an idea, never achieved before, just across the project, and then summarize this

Scene: HTML5, local commodity list information scroll (partial scroll bar)

1. By setting the height subCategoryScroll jq display screen height (assumed to be 100), set the height of the actual height productlist list information (assumed to be 300)

<div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;">
    <ul class="list-inline mb0 ml0" id="productlist">  
        <li>商品信息区域</li>
    </ul>
</div>

2. Scroll script, if pulled achieve the very bottom of the next page to load display; to roll back, not loaded trigger event (focus)

var page = 1;//加载的索引
    var isload = true;//设置是否终止滚动加载 
    var curScrollHeight = 0;//当前滚动位置
    var curCount = 1;//计数器，防止滚动时重复执行加载下一页
    $("#subCategoryScroll").scroll(function () {
        var pageHeight = $("#productlist").height();
        var showHeight = $("#subCategoryScroll").height();
        var scrollHeight = $("#subCategoryScroll").scrollTop(); 
        if (curScrollHeight - scrollHeight < 10 && curScrollHeight>0) { 
            if (curCount == 1) {
                page += 1;
                loadproducts(page); //加载新数据
            } 
            curCount++; //加载下一页后计数器+1
        }
        if (curScrollHeight < scrollHeight) { 
            curScrollHeight = pageHeight - showHeight;//滚动到页面底部时，重设当前滚动位置
            curCount = 1;
        } 
    });
    function loadproducts(pageindex) {
        $.ajax({
            url: $("#GetDataUrl").val(), data: { "currentPageIndex": pageindex, "Condition": $("#Condition").val() },
            type: 'GET', dataType: 'json', timeout: 10000,
            async: false,
            success: function (resultData) {
                if (resultData != null) {
                    var html = "";
                    if (resultData.rows == 0 && pageindex == 1) {
                        isload = false;
                        html = "抱歉，暂无商品！"
                        $("#productlist").append(html);
                    }
                    else { 
                        $.each(resultData.rows, function (i, item) { 
                            html = '<li>内容</li>';  
                            $("#productlist").append(html);
                        });
                        if (resultData.PageTotal == pageindex) {
                            isload = false;
                        }
                    }
                }
            }
        });
    }

 

As a whole is not difficult, the key is to scroll event processing logic

If the body of the page is a scroll bar, pageHeight, showHeight, scrollHeight and $ (document) .height (), $ (window) .height (), $ (document) .scrollTop () correspondence

 

Reproduced in: https: //my.oschina.net/garyun/blog/602758