博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5商城开发一 楼层滚动加载数据
阅读量:5749 次
发布时间:2019-06-18

本文共 2193 字,大约阅读时间需要 7 分钟。

  hot3.png

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

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

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

  • 商品信息区域

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 = '
  • 内容
  • '; $("#productlist").append(html); }); if (resultData.PageTotal == pageindex) { isload = false; } } } } }); }

     

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

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

     

    转载于:https://my.oschina.net/garyun/blog/602758

    你可能感兴趣的文章
    python读excel写入mysql小工具
    查看>>
    如何学习区块链
    查看>>
    搜索问题的办法
    查看>>
    微信分销系统商城营销5大重点
    查看>>
    求职准备 - 收藏集 - 掘金
    查看>>
    htm5新特性(转)
    查看>>
    Linux-Centos启动流程
    查看>>
    php 设计模式
    查看>>
    后端技术精选 - 收藏集 - 掘金
    查看>>
    Laravel 服务容器
    查看>>
    mac安装kubernetes并运行echoserver
    查看>>
    多页架构的前后端分离方案(webpack+express)
    查看>>
    算法(第4版) Chapter 1
    查看>>
    前端技术选型的遗憾和经验教训
    查看>>
    “亲切照料”下的领域驱动设计
    查看>>
    SRE工程师到底是做什么的?
    查看>>
    解读:Red Hat为什么收购Ansible
    查看>>
    Ossim下的安全合规管理
    查看>>
    DelphiWebMVC框架下BPL热部署实现
    查看>>
    C++与MySQL的冲突
    查看>>