zoukankan      html  css  js  c++  java
  • HTML5商城开发一 楼层滚动加载数据

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

    场景: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()一一对应

  • 相关阅读:
    基于mAppWidget实现手绘地图--索引&DEMO
    C语言数据结构----栈的定义及实现
    libvirt命令行文档
    清理系统方法
    Linux 经典电子书共享下载
    使用数组实现队列----《数据结构与算法分析---C语言描述》
    清理系统垃圾
    epoll的内部实现 & 百万级别句柄监听 & lt和et模式非常好的解释
    进程、线程、socket套接字-资源大小 & 切换代价
    网络编程学习-面向工资编程
  • 原文地址:https://www.cnblogs.com/xcsn/p/5038071.html
Copyright © 2011-2022 走看看