码迷,mamicode.com
首页 > Web开发 > 详细

HTML5商城开发一 楼层滚动加载数据

时间:2015-12-11 10:00:03      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下

场景:HTML5,局部商品列表信息滚动(局部滚动条)

1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300)

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

2.滚动脚本,实现如果拉到最底部,将加载下一页显示;往回滚,不触发加载事件(重点)

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

 

整体不难,关键在于滚动事件的逻辑处理

如果是页面body的滚动条,pageHeight、showHeight、scrollHeight 与 $(document).height()、 $(window).height() 、 $(document).scrollTop()一一对应

 

HTML5商城开发一 楼层滚动加载数据

标签:

原文地址:http://www.cnblogs.com/xcsn/p/5038071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!