第七频道

探索创新和消费
有料有趣的创业交流平台

JS实现-页面数据无限加载

  在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果:

  当滚动条滚动到页面底部时,提示“正在加载…”。

  当页面已经加载了所有数据后,滚动到页面底部会提示“数据已加载到底了”:

  实现数据无限加载的过程大致如下:

 

  1.滚动条滚动到页面底部。

  2.触发ajax加载,把请求返回的数据加载到列表后面。

  如何判断滚动条是否滚动到页面底部?我们可以设置一个规则:当滚动条的滚动高度和整个文档高度相差不到20像素,则认为滚动条滚动到页面底部了:

  文档高度 - 视口高度 - 滚动条滚动高度 < 20

  要通过代码实现这样的判断,我们必须要了解上面的这些高度通过哪些代码获取?可以参考我之前写的一篇“HTML元素坐标定位,这些知识点得掌握”。

  上面的判断,我封装了一个方法:

01 //检测滚动条是否滚动到页面底部
02     function isScrollToPageBottom(){
03         //文档高度
04         var documentHeight = document.documentElement.offsetHeight;
05         var viewPortHeight = getViewportSize().h;
06         var scrollHeight = window.pageYOffset ||
07                 document.documentElement.scrollTop ||
08                 document.body.scrollTop || 0;
09  
10         return documentHeight - viewPortHeight - scrollHeight < 20;
11     }
 

  判断有了,我们就可以开启一个定时器,900毫秒监测一次,如果isScrollToPageBottom()返回true则调用ajax请求数据,如果返回false则通过900毫秒之后再监测。

  下面是核心代码实现:

001 <!DOCTYPE html>
002 <html lang="en">
003 <head>
004     <meta charset="UTF-8">
005     <title>无限分页</title>
006     <link rel="stylesheet" href="assets/css/index.css"/>
007 </head>
008 <body>
009 <div class="l-page">
010     <ul id="list" class="list">
011     </ul>
012 </div>
013 <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
014 <script src="js/jquery.mockjax.js"></script>
015 <script type="text/javascript" src="js/dataMock.js"></script>
016 <script type="text/javascript">
017     //作为一个对象的w和h属性返回视口的尺寸
018     function getViewportSize(w){
019         //使用指定的窗口, 如果不带参数则使用当前窗口
020         w = w || window;
021  
022         //除了IE8及更早的版本以外,其他浏览器都能用
023         if(w.innerWidth != null)
024             return {w: w.innerWidth, h: w.innerHeight};
025  
026         //对标准模式下的IE(或任意浏览器)
027         var d = w.document;
028         if(document.compatMode == "CSS1Compat")
029             return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
030  
031         //对怪异模式下的浏览器
032         return {w: d.body.clientWidth, h: d.body.clientHeight};
033     }
034  
035     //检测滚动条是否滚动到页面底部
036     function isScrollToPageBottom(){
037         //文档高度
038         var documentHeight = document.documentElement.offsetHeight;
039         var viewPortHeight = getViewportSize().h;
040         var scrollHeight = window.pageYOffset ||
041                 document.documentElement.scrollTop ||
042                 document.body.scrollTop || 0;
043  
044         return documentHeight - viewPortHeight - scrollHeight < 20;
045     }
046  
047     //商品模板
048     function getGoodsTemplate(goods){
049         return "<li>" +
050                 "<div class='pic-wrap leftFloat'>" +
051                 "<img src='" + goods.pic + "'>" +
052                 "</div>" +
053                 "<div class='info-wrap leftFloat'>" +
054                 "<div class='info-name'><span>" + goods.name + "</span></div>" +
055                 "<div class='info-address'><span>" + goods.address +"</span></div>" +
056                 "<div class='info-bottom'>" +
057                 "<div class='info-price leftFloat'><span>¥" + goods.price + "</span></div>" +
058                 "<div class='info-star leftFloat'><span>" + goods.star + "人推荐</span></div>" +
059                 "<div class='info-more leftFloat'><span>更多信息</span></div>" +
060                 "</div>" +
061                 "</div>" +
062                 "</li>";
063     }
064  
065     //初始化的时候默给list加载100条数据
066     $.ajax("http://localhost:8800/loadData?sessionId=" + (+ newDate)).done(function(result){
067         if(result.status){
068             var html = "";
069             result.data.forEach(function(goods){
070                 html += getGoodsTemplate(goods);
071             });
072             $("#list").append(html);
073         }
074     });
075  
076  
077     //加载数据
078     function loadDataDynamic(){
079         //先显示正在加载中
080         if( $("#loadingLi").length === 0)
081              $("#list").append("<li id='loadingLi' class='loading'>正在加载...</li>");
082         else{
083             $("#loadingLi").text("正在加载...").removeClass("space");
084         }
085         var loadingLi = document.getElementById("loadingLi");
086         loadingLi.scrollIntoView();
087         //加载数据,数据加载完成后需要移除加载提示
088         var hasData = false, msg = "";
089         $.ajax("http://localhost:8800/loadData?sessionId=" + (+ newDate)).done(function(result){
090              if(result.status){
091                 if(result.data.length > 0){
092                     hasData = true;
093                     var html = "";
094                     result.data.forEach(function(goods){
095                         html += getGoodsTemplate(goods);
096                     });
097                     $("#list").append(html);
098                 }else{
099                     msg = "数据已加载到底了"
100                 }
101             }
102              $("#list").append(loadingLi);
103         }).fail(function(){
104             msg = "数据加载失败!";
105          }).always(function(){
106             !hasData && setTimeout(function(){
107                 $(document.body).scrollTop(document.body.scrollTop -40);
108             }, 500);
109                 msg && $("#loadingLi").text(msg);
110             //重新监听滚动
111             setTimeout(watchScroll, 900);
112          });
113     }
114  
115     //如果滚动条滚动到页面底部,需要加载新的数据,并且显示加载提示
116     function watchScroll(){
117         if(!isScrollToPageBottom()){
118             setTimeout( arguments.callee, 900);
119             return;            }
120         loadDataDynamic();
121     }
122  
123     //开始检测滚动条
124     watchScroll();
125 </script>
126 </body>
127 </html>

 

  demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下:

01 /**
02  * 模拟接口.
03  */
04 var i = 0, len = 200, addresses = ["四川""北京""上海""广州""深圳""甘肃""云南","浙江""青海""贵州"];
05  
06  
07  
08 function getData(){
09     var size = Math.min(i + 50, len), arr = [];
10     for(; i < size; i++){
11         arr.push({
12             name: "苹果" + (i % 10 + 1),
13             pic: "assets/images/iphone" + (i % 10 + 1) + ".jpg",
14             price: parseInt(Math.random() * 10000),
15             star: parseInt(Math.random() * 1000),
16             address: addresses[i % 10]
17         })
18     }
19  
20     return arr;
21 }
22  
23 $.mockjax({
24     url: 'http://localhost:8800/loadData*',
25     responseTime: 1000,
26     response: function(settings){
27         this.responseText = {
28             status: true,
29             data: getData()
30         }
31     }
32 });

  整个完整的demo我已上传到github上:

  https://github.com/heavis/pageLoader

  在线演示:

  https://heavis.github.io/pageLoader/index.html

未经允许不得转载:移动技术 > JS实现-页面数据无限加载

评论