js implements loading more function instances

When a front-end page of the project displays purchased products, it is required to be able to pull down to load more. Regarding how to implement the "load more" function, there are plug-ins available online, such as the well-known pull-up to load more and pull-down to refresh functions implemented using iscroll.js.

But it is very troublesome to use in practice. Since it is a third-party plug-in, it has to be used according to the method defined by the other party, which always feels very uncomfortable to use. In addition, iscroll.js itself does not integrate more functions and needs to be expanded by itself. If you want to continue using iscroll.js to load more functions, you can check out the link given above.

The h5 project needs to implement a simple paging function. Since it is a mobile terminal, it would be better to consider using "Load More" instead of turning pages on the PC side.

Load more based on buttons

The simplest way is to give a load more button. If there is still data, click it to load more, and continue to pull a few pieces of data; until there is no more data, hide the load more button.

The effect is as follows:

Page html:

<div class="content">
  <div class="weui_panel weui_panel_access">
    <div class="weui_panel_hd">文章列表</div>
    <div class="weui_panel_bd js-blog-list">
       
    </div>
  </div>
   
  <!--加载更多按钮-->
  <div class="js-load-more">加载更多</div>
   
</div>
<script src="js/zepto.min.js"></script>

Load more button style: loadmore.css:

@charset "utf-8";
 
.js-load-more{
  padding:0 15px;
  width:120px;
  height:30px;
  background-color:#D31733;
  color:#fff;
  line-height:30px;
  text-align:center;
  border-radius:5px;
  margin:20px auto;
  border:0 none;
  font-size:16px;
  display:none;/*默认不显示，ajax调用成功后才决定显示与否*/
}

Load more js code:

$(function(){
 
  /*初始化*/
  var counter = 0; /*计数器*/
  var pageStart = 0; /*offset*/
  var pageSize = 4; /*size*/
   
  /*首次加载*/
  getData(pageStart, pageSize);
   
  /*监听加载更多*/
  $(document).on('click', '.js-load-more', function(){
    counter ++;
    pageStart = counter * pageSize;
     
    getData(pageStart, pageSize);
  });
});

There is not much code here. Among them, getData(pageStart, pageSize) is the business logic code, which is responsible for pulling data from the server. Here’s an example:

function getData(offset,size){
  $.ajax({
    type: 'GET',
    url: 'json/blog.json',
    dataType: 'json',
    success: function(reponse){
   
      var data = reponse.list;
      var sum = reponse.list.length;
   
      var result = '';
       
      /****业务逻辑块：实现拼接html内容并append到页面*********/
       
      //console.log(offset , size, sum);
       
      /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
      * 例如分页数是5，只剩2条，则只取2条
      *
      * 实际MySQL查询时不写这个不会有问题
      */
      if(sum - offset < size ){
        size = sum - offset;
      }
       
      /*使用for循环模拟SQL里的limit(offset,size)*/
      for(var i=offset; i< (offset+size); i++){
        result +=&#39;<div class="weui_media_box weui_media_text">&#39;+
            &#39;<a href="&#39;+ data[i].url +&#39;" target="_blank"><h4 class="weui_media_title">&#39;+ data[i].title +&#39;</h4></a>&#39;+
            &#39;<p class="weui_media_desc">&#39;+ data[i].desc +&#39;</p>&#39;+
          &#39;</div>&#39;;
      }
   
      $(&#39;.js-blog-list&#39;).append(result);
       
      /*******************************************/
   
      /*隐藏more按钮*/
      if ( (offset + size) >= sum){
        $(".js-load-more").hide();
      }else{
        $(".js-load-more").show();
      }
    },
    error: function(xhr, type){
      alert(&#39;Ajax error!&#39;);
    }
  });
}

It’s relatively simple.

Loading more based on scroll events
Above we implemented loading more by clicking the button, and the overall process is relatively simple. Here, I provide another way to load more: based on scroll events.

Posted the code directly:

$(function(){
 
  /*初始化*/
  var counter = 0; /*计数器*/
  var pageStart = 0; /*offset*/
  var pageSize = 7; /*size*/
  var isEnd = false;/*结束标志*/
   
  /*首次加载*/
  getData(pageStart, pageSize);
   
  /*监听加载更多*/
  $(window).scroll(function(){
    if(isEnd == true){
      return;
    }
 
    // 当滚动到最底部以上100像素时， 加载新内容
    // 核心代码
    if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
      counter ++;
      pageStart = counter * pageSize;
       
      getData(pageStart, pageSize);
    }
  });
});

It can be seen that the code has not changed much. It mainly depends on the judgment conditions in the core code: when scrolling to 100 pixels above the bottom, new content is loaded.

Business logic getData(pageStart, pageSize) only needs to change the logic in if ( (offset + size) >= sum) to:

if ( (offset + size) >= sum){
  isEnd = true;//没有更多了
}

.

Of course, there are still areas that need to be optimized, such as: How to prevent the server from scrolling too fast and causing multiple requests before the server has time to respond?

Comprehensive example

Through the above example, it is obvious that the second one is better, no need to click. But there is a problem with the second method:

If you set the page size to display 2 or 3 items each time (size=2), and the total records are 20, you will find that you cannot trigger the logic of scrolling down to load more. At this time it would be nice to have a click button to load more.

Therefore, we can combine the above two methods:

By default, scroll events are used to load more. When the display number is too small to trigger the logic of scrolling down to load more, use Load More Clicks event.
Here, I simply abstracted the behavior of loading more and wrote a simple plug-in:

loadmore.js

/*
 * loadmore.js
 * 加载更多
 *
 * @time 2016-4-18 17:40:25
 * @author 飞鸿影~
 * @email jiancaigege@163.com
 * 可以传的参数默认有：size,scroll 可以自定义
 * */
 
;(function(w,$){
   
  var loadmore = { 
    /*单页加载更多 通用方法
     * 
     * @param callback 回调方法
     * @param config 自定义参数
     * */
    get : function(callback, config){
      var config = config ? config : {}; /*防止未传参数报错*/
 
      var counter = 0; /*计数器*/
      var pageStart = 0;
      var pageSize = config.size ? config.size : 10;
 
      /*默认通过点击加载更多*/
      $(document).on('click', '.js-load-more', function(){
        counter ++;
        pageStart = counter * pageSize;
         
        callback && callback(config, pageStart, pageSize);
      });
       
      /*通过自动监听滚动事件加载更多,可选支持*/
      config.isEnd = false; /*结束标志*/
      config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/
      $(window).scroll(function(){
         
        /*是否开启滚动加载*/
        if(!config.scroll){
          return;
        }
         
        /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
        if(config.isEnd == true || config.isAjax == true){
          return;
        }
         
        /*当滚动到最底部以上100像素时， 加载新内容*/
        if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
          counter ++;
          pageStart = counter * pageSize;
           
          callback && callback(config, pageStart, pageSize);
        }
      });
 
      /*第一次自动加载*/
      callback && callback(config, pageStart, pageSize);
    },
       
  }
 
  $.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);

How to use it? It's simple:

$.loadmore.get(getData, {
  scroll: true, //默认是false,是否支持滚动加载
  size:7, //默认是10
  flag: 1, //自定义参数，可选，示例里没有用到
});

The first parameter is the callback function, which is our business logic. I posted the final modified business logic method:

function getData(config, offset,size){
 
  config.isAjax = true;
 
  $.ajax({
    type: 'GET',
    url: 'json/blog.json',
    dataType: 'json',
    success: function(reponse){
     
      config.isAjax = false;
 
      var data = reponse.list;
      var sum = reponse.list.length;
       
      var result = '';
       
      /************业务逻辑块：实现拼接html内容并append到页面*****************/
       
      //console.log(offset , size, sum);
       
      /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
      * 例如分页数是5，只剩2条，则只取2条
      *
      * 实际MySQL查询时不写这个
      */
      if(sum - offset < size ){
        size = sum - offset;
      }
 
       
      /*使用for循环模拟SQL里的limit(offset,size)*/
      for(var i=offset; i< (offset+size); i++){
        result +=&#39;<div class="weui_media_box weui_media_text">&#39;+
            &#39;<a href="&#39;+ data[i].url +&#39;" target="_blank"><h4 class="weui_media_title">&#39;+ data[i].title +&#39;</h4></a>&#39;+
            &#39;<p class="weui_media_desc">&#39;+ data[i].desc +&#39;</p>&#39;+
          &#39;</div>&#39;;
      }
 
      $(&#39;.js-blog-list&#39;).append(result);
       
      /*******************************************/
       
      /*隐藏more*/
      if ( (offset + size) >= sum){
        $(".js-load-more").hide();
        config.isEnd = true; /*停止滚动加载请求*/
        //提示没有了
      }else{
        $(".js-load-more").show();
      }
    },
    error: function(xhr, type){
      alert(&#39;Ajax error!&#39;);
    }
  });
}