js實現(xiàn)加載更多功能實例

更新時間：2016年10月27日 14:22:07 作者：飛鴻影~

這篇文章主要介紹了js實現(xiàn)加載更多功能的方法,以實例演示了加載更多的代碼實現(xiàn),非常具有實用價值,需要的朋友可以參考下

項目的一個前端頁面展示已購買商品時，要求能下拉加載更多。關(guān)于如何實現(xiàn)『加載更多』功能，網(wǎng)上有插件可用，例如比較著名的使用iscroll.js實現(xiàn)的上拉加載更多、下拉刷新功能。

但實際用起來卻是很麻煩。由于是第三方插件，要按照對方定義的方法使用，用起來總感覺很不順心。再加上iscroll.js本身并沒有集成加載更多的功能，需要進(jìn)行自行擴(kuò)展。想繼續(xù)使用iscroll.js實現(xiàn)加載更多功能的，上面給的鏈接可以看看。

h5項目里需要實現(xiàn)簡單的分頁功能，由于是移動端，考慮用『加載更多』會更好，而不是PC端的翻頁。

基于按鈕實現(xiàn)加載更多

最簡單的就是給一個加載更多的按鈕，如果還有數(shù)據(jù)，點擊下加載更多，繼續(xù)拉幾條數(shù)據(jù)；直到?jīng)]有更多數(shù)據(jù)了，隱藏加載更多按鈕。

效果如下：

頁面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>

加載更多按鈕樣式：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;/*默認(rèn)不顯示，ajax調(diào)用成功后才決定顯示與否*/
}

加載更多的js代碼：

$(function(){

  /*初始化*/
  var counter = 0; /*計數(shù)器*/
  var pageStart = 0; /*offset*/
  var pageSize = 4; /*size*/
  
  /*首次加載*/
  getData(pageStart, pageSize);
  
  /*監(jiān)聽加載更多*/
  $(document).on('click', '.js-load-more', function(){
    counter ++;
    pageStart = counter * pageSize;
    
    getData(pageStart, pageSize);
  });
});

這里的代碼并不多。其中g(shù)etData(pageStart, pageSize)是業(yè)務(wù)邏輯代碼，負(fù)責(zé)從服務(wù)端拉去數(shù)據(jù)。這里給個示例：

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 = '';
      
      /****業(yè)務(wù)邏輯塊：實現(xiàn)拼接html內(nèi)容并append到頁面*********/
      
      //console.log(offset , size, sum);
      
      /*如果剩下的記錄數(shù)不夠分頁，就讓分頁數(shù)取剩下的記錄數(shù)
      * 例如分頁數(shù)是5，只剩2條，則只取2條
      *
      * 實際MySQL查詢時不寫這個不會有問題
      */
      if(sum - offset < size ){
        size = sum - offset;
      }
      
      /*使用for循環(huán)模擬SQL里的limit(offset,size)*/
      for(var i=offset; i< (offset+size); i++){
        result +='<div class="weui_media_box weui_media_text">'+
            '<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
            '<p class="weui_media_desc">'+ data[i].desc +'</p>'+
          '</div>';
      }
  
      $('.js-blog-list').append(result);
      
      /*******************************************/
  
      /*隱藏more按鈕*/
      if ( (offset + size) >= sum){
        $(".js-load-more").hide();
      }else{
        $(".js-load-more").show();
      }
    },
    error: function(xhr, type){
      alert('Ajax error!');
    }
  });
}

還是比較簡單的。

基于滾動事件實現(xiàn)加載更多
上面我們通過按鈕點擊實現(xiàn)加載更多，整體過程還是比較簡單的。這里，我提供另一種方法實現(xiàn)加載更多：基于于滾動(scroll)事件。

直接貼代碼了：

$(function(){

  /*初始化*/
  var counter = 0; /*計數(shù)器*/
  var pageStart = 0; /*offset*/
  var pageSize = 7; /*size*/
  var isEnd = false;/*結(jié)束標(biāo)志*/
  
  /*首次加載*/
  getData(pageStart, pageSize);
  
  /*監(jiān)聽加載更多*/ 
  $(window).scroll(function(){
    if(isEnd == true){
      return;
    }

    // 當(dāng)滾動到最底部以上100像素時， 加載新內(nèi)容
    // 核心代碼
    if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
      counter ++;
      pageStart = counter * pageSize;
      
      getData(pageStart, pageSize);
    }
  });
});

可以看出，代碼變化不大，主要看核心代碼里的判斷條件：當(dāng)滾動到最底部以上100像素時，加載新內(nèi)容。

業(yè)務(wù)邏輯getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的邏輯改成：

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

就行了。

當(dāng)然，這里面還有要優(yōu)化的地方，例如：如何防止?jié)L動過快，服務(wù)端沒來得及響應(yīng)造成多次請求？

綜合實例

通過上面的例子，顯然第二種更好，不用去點擊。但是第二個方法有個問題：

如果設(shè)置頁面大小每次顯示2條或3條(size=2)，總記錄是20，你會發(fā)現(xiàn)無法觸發(fā)向下滾動加載更多的邏輯。這時候有個加載更多的點擊按鈕就好了。

因此，我們可以把以上兩種方法合在一起：

默認(rèn)使用滾動事件實現(xiàn)加載更多，當(dāng)顯示數(shù)目太小不足以觸發(fā)向下滾動加載更多的邏輯時，使用加載更多點擊事件。
這里，我對加載更多這個行為進(jìn)行簡單的抽象，寫了個簡單的插件：

loadmore.js

/*
 * loadmore.js
 * 加載更多
 *
 * @time 2016-4-18 17:40:25
 * @author 飛鴻影~
 * @email jiancaigege@163.com
 * 可以傳的參數(shù)默認(rèn)有：size,scroll 可以自定義
 * */

;(function(w,$){
  
  var loadmore = { 
    /*單頁加載更多 通用方法
     * 
     * @param callback 回調(diào)方法
     * @param config 自定義參數(shù)
     * */
    get : function(callback, config){
      var config = config ? config : {}; /*防止未傳參數(shù)報錯*/

      var counter = 0; /*計數(shù)器*/
      var pageStart = 0;
      var pageSize = config.size ? config.size : 10;

      /*默認(rèn)通過點擊加載更多*/
      $(document).on('click', '.js-load-more', function(){
        counter ++;
        pageStart = counter * pageSize;
        
        callback && callback(config, pageStart, pageSize);
      });
      
      /*通過自動監(jiān)聽滾動事件加載更多,可選支持*/
      config.isEnd = false; /*結(jié)束標(biāo)志*/
      config.isAjax = false; /*防止?jié)L動過快，服務(wù)端沒來得及響應(yīng)造成多次請求*/
      $(window).scroll(function(){
        
        /*是否開啟滾動加載*/
        if(!config.scroll){
          return;
        }
        
        /*滾動加載時如果已經(jīng)沒有更多的數(shù)據(jù)了、正在發(fā)生請求時，不能繼續(xù)進(jìn)行*/
        if(config.isEnd == true || config.isAjax == true){
          return;
        }
        
        /*當(dāng)滾動到最底部以上100像素時， 加載新內(nèi)容*/
        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);

如何使用呢？很簡單：

$.loadmore.get(getData, {
  scroll: true, //默認(rèn)是false,是否支持滾動加載
  size:7, //默認(rèn)是10
  flag: 1, //自定義參數(shù)，可選，示例里沒有用到
});

第一個參數(shù)是回調(diào)函數(shù)，即我們的業(yè)務(wù)邏輯。我把最終修改過的業(yè)務(wù)邏輯方法貼出來：

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 = '';
      
      /************業(yè)務(wù)邏輯塊：實現(xiàn)拼接html內(nèi)容并append到頁面*****************/
      
      //console.log(offset , size, sum);
      
      /*如果剩下的記錄數(shù)不夠分頁，就讓分頁數(shù)取剩下的記錄數(shù)
      * 例如分頁數(shù)是5，只剩2條，則只取2條
      *
      * 實際MySQL查詢時不寫這個
      */
      if(sum - offset < size ){
        size = sum - offset;
      }

      
      /*使用for循環(huán)模擬SQL里的limit(offset,size)*/
      for(var i=offset; i< (offset+size); i++){
        result +='<div class="weui_media_box weui_media_text">'+
            '<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
            '<p class="weui_media_desc">'+ data[i].desc +'</p>'+
          '</div>';
      }

      $('.js-blog-list').append(result);
      
      /*******************************************/
      
      /*隱藏more*/
      if ( (offset + size) >= sum){
        $(".js-load-more").hide();
        config.isEnd = true; /*停止?jié)L動加載請求*/
        //提示沒有了
      }else{
        $(".js-load-more").show();
      }
    },
    error: function(xhr, type){
      alert('Ajax error!');
    }
  });
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: