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

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

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

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

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

h5項(xiàng)目里需要實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能，由于是移動(dòng)端，考慮用『加載更多』會(huì)更好，而不是PC端的翻頁(yè)。

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

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

效果如下：

頁(yè)面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; /*計(jì)數(shù)器*/
  var pageStart = 0; /*offset*/
  var pageSize = 4; /*size*/
  
  /*首次加載*/
  getData(pageStart, pageSize);
  
  /*監(jiān)聽(tīng)加載更多*/
  $(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ù)。這里給個(gè)示例：

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

還是比較簡(jiǎn)單的。

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

直接貼代碼了：

$(function(){

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

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

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

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

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

就行了。

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

綜合實(shí)例

通過(guò)上面的例子，顯然第二種更好，不用去點(diǎn)擊。但是第二個(gè)方法有個(gè)問(wèn)題：

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

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

默認(rèn)使用滾動(dòng)事件實(shí)現(xiàn)加載更多，當(dāng)顯示數(shù)目太小不足以觸發(fā)向下滾動(dòng)加載更多的邏輯時(shí)，使用加載更多點(diǎn)擊事件。
這里，我對(duì)加載更多這個(gè)行為進(jìn)行簡(jiǎn)單的抽象，寫了個(gè)簡(jiǎ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 = { 
    /*單頁(yè)加載更多 通用方法
     * 
     * @param callback 回調(diào)方法
     * @param config 自定義參數(shù)
     * */
    get : function(callback, config){
      var config = config ? config : {}; /*防止未傳參數(shù)報(bào)錯(cuò)*/

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

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

      /*第一次自動(dòng)加載*/
      callback && callback(config, pageStart, pageSize);
    },
      
  }

  $.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);

如何使用呢？很簡(jiǎn)單：

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

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

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ù)邏輯塊：實(shí)現(xiàn)拼接html內(nèi)容并append到頁(yè)面*****************/
      
      //console.log(offset , size, sum);
      
      /*如果剩下的記錄數(shù)不夠分頁(yè)，就讓分頁(yè)數(shù)取剩下的記錄數(shù)
      * 例如分頁(yè)數(shù)是5，只剩2條，則只取2條
      *
      * 實(shí)際MySQL查詢時(shí)不寫這個(gè)
      */
      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動(dòng)加載請(qǐng)求*/
        //提示沒(méi)有了
      }else{
        $(".js-load-more").show();
      }
    },
    error: function(xhr, type){
      alert('Ajax error!');
    }
  });
}

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

您可能感興趣的文章: