div滚动到底部自动加载 |
您所在的位置：网站首页 › vue向上滚动加载 › div滚动到底部自动加载 |
|
重点： 一开始一直进不了滚动事件，最后发现是因为需要滚动元素的父元素没有设置overflow：hidden;记住了！！ 如果不设置fixed的话，就要设置元素固定的高！！ css #contentBox { flex: 1;//父元素设置display：flex overflow: auto; margin-bottom: 20px; /* height:529px;*/ }html 加载更多js var count = 5;//每次加载 请求的条数 var isLoad = true;//是否允许加载数据 $(function(){ userScroll() loadScenePage() }) //滚动条到底就加载 function userScroll() { $("#contentBox").scroll(function () { var nHeight = $(this).outerHeight(); var nScrollHight = $(this)[0].scrollHeight; var nScrollTop = $(this)[0].scrollTop; if (nScrollHight - (nScrollTop + $(this).height()) return; } isLoad = false; //if (Number($("#pageIndex").val()) > Number($("input[name=PageAll]").last().val())) { if (Number($("#pageIndex").val()) > 2) { $("div[class=loadDiv]").text("已经没有更多数据"); return; } loadScenePage(); } }); } //获取数据 function loadScenePage() { var param = getPara(); $(".loadDiv").text("加载中..."); isLoad = false; $.ajax({ type: "POST", url: "/SceneManager/SceneSchool/FoodDistributionPage", data: { schoolName: param.schoolName, pageIndex: param.pageIndex, count: param.count, searchTime: param.date, platId: platId, schType: param.schType, BT: param.BT, sceneTypeName:"今日食材" }, success: function (data) { $(".loadDiv").text("加载更多"); //if ($("#pageIndex").val()) $("#schoolDeatl").append(data); $("#pageIndex").val(Number($("#pageIndex").val()) + 1); if ($("#pageIndex").val() >= $("input[name=PageAll]").last().val()) { $("div[class=loadDiv]").text("已经没有更多数据"); } //$("input[name=PageAll]").last().val()这个值是后台传给我的总页数 isLoad = true; }, error: function () { isLoad = true; } }); } //获取参数（不重要，传给后台需要的参数而已） function getPara() { var para = {}; var schoolName = $("#schoolNameInput").val(); var pageIndex = $("#pageIndex").val(); var date = $("#endTime").val(); para.schoolName = schoolName; para.pageIndex = pageIndex; para.count = count; para.date = date; para.schType = []; $("#school_C li").each(function (i, ele) { if ($(this).hasClass('C_active')) { var h = $(this).attr('value') para.schType.push(h) } }); para.BT = []; $("input[name=jyname]:checked").each(function (i, ele) { para.BT.push(parseInt($(ele).val())); }); return para; }这个只有我自己看得懂，因为这个是后台传了总共页数给我，而且内容是另一个文件引入的，直接$("#schoolDeatl").append(data);。 如果要改的话，看看获取数据那里能不能改成var html=""… 判断是否滚动的isLoad 问题,因为是先获取的数据再滚动 所以：首先isLoad =false; 获取数据的时候，设置了isload为true; 进入滚动事件时，如果isload=false跳出 继续往下走 再设置isload=false 一般情况： 可以首先设置isload=false; 进入滚动时：如果isload=true就跳出 if (isScrolling) { return } 继续往下走：设置isload=true; 是因为滚动事件会触发上千次事件，只执行一次就可以了，所以设置isload=true 事件只执行一次就行了，不再继续进入； 执行完事件之后，再恢复isload=false |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |