2 imaginecode ImagineCode 于 2016.02.29 14:22 提问

#前端#一次性请求数据,然后滚动加载

#前端#如果页面数据是一次性全部加载进来,但是只在页面上显示8条,我要滚动加载显示后面的数据,如何做,或是有什么思路

3个回答

ImagineCode
ImagineCode   2016.03.08 10:29
已采纳

已解决:

 $(window).scroll(function(){
    //当滚动到底部的时候,判断是否有8条数据,如果大于8条则显示前8条;如果小于8条,则全显示
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();

  if(scrollTop + windowHeight == scrollHeight){//滚动到底部
            pageIndex++;
            var len=$("li.hide").length;
            //判断是否有8条数据
            if(len<=8){//如果小于等于8条,则全显示
                $("li.scrollItem").each(function(){
                    $("li.scrollItem").removeClass("hide");
                });
                if(len==0){
                    $("#navigation").text("T_T没有新数据了...");
                    $("#navigation").css("border","0");
                }
            }else if(len>8) {//大于8条
                //显示8条
                    $("li.hide:lt(8)").removeClass("hide");
            }
  }
});
showbo
showbo   Ds   Rxr 2016.03.01 09:21

那不是和分页一样,多余的先隐藏,然后用全局变量i记录显示的页数,滚动到页低就i++,然后显示i*page条数据

js判断已经滚动到页面底部

Yiran8935
Yiran8935   2016.02.29 14:33

页面上面加载的所有数据都加载到页面上去,然后初始化的时候把前8条显示出来,后面的都hide,
页面滚动条滚动到最下面的时候触发一个事件,让pageIndex加一,这样的话就把2乘8条数据显示出来,后面的以此类推。

Yiran8935
Yiran8935 每下拉到底部自动加一啊,然后加了后计算总条数啊
2 年多之前 回复
Yiran8935
Yiran8935 回复ImagineCode: 初始化页面的时候全局变量int page=1
2 年多之前 回复
ImagineCode
ImagineCode 当滚动到底部的时候,触发一个scroll滚动事件。那2*8条的数据怎么计算显示出来
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
一次性加载数据,前端分页
在项目中,前端显示数据的时候,很多地方需要用到分页,通常有两种方式: 一:点击页码的时候,ajax请求后台服务器得到每一页数据,然后在前台进行显示 二:在页面加载,或者其他事件中,一次性将数据加载至前台,有前端js控制分页,分页行为不经过后台
前端js分批次请求数据,减缓前端显示压力
一次性请求数据太多,前端显示加载可能会很慢或者响应不过来,这时候可以分批次请求数据。
JQGrid一次性加载数据到本地再分页
本程序是别人开发的,我只是把程序拿来修改了一下,程序对于小量数据性能还是不错的,但是大量数据的话,最发每次异步请求只返回需要的数据,本程序只实现了一次加载数据功能!
前端页面实现滚动加载数据的案例
实现滚动加载内容
Ajax动态滚动加载数据
看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现。 首先,准备一个分页的存储过程: CREATE PROCEDURE proctest @pagesize INT, @pagenumber INT AS SELECT * FROM ( SELECT ROW_NUMBER()OVER (ORDER B
滚动时动态加载页面内容
有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == fa
页面滚动ajax异步请求数据(方法
var currentPage =1; //当前页var pages = {:$pageNum:}; //总页数function nextPage(){ //如果总页数为0,直接return if (pages == 0) { return; } currentPage++; //当前页大于总页数,显示没有更多的提示语 if(currentPage>pages){ jQuery('#no
滚动条滚动到底部加载其他数据(Jquery+ajax)
/*js*/ $(function(){ getData(); var winH = $("#div1").height(); //页面可视区域高度 var scrollHandler = function () { var pageH = $(document.body).height(); //当前文档总高度
案例十二、JavaScript实现无穷滚动加载数据
首先实现滚动要借助onscroll事件处理程序。 无穷滚动就是滑动滚动条,实现数据块的无穷加载。 我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时,它会进行加载。那么问题就是在判断什么时候应该加载。 我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时,也就无疑是最后一个图片了。所以要判断该
web前端,jquery实现瀑布流(鼠标滚动不断加载)
源码下载: 参考视频:http://www.jikexueyuan.com/course/264.html