js implementiert das Laden weiterer Funktionsinstanzen

Wenn auf einer Front-End-Seite des Projekts gekaufte Produkte angezeigt werden, muss diese nach unten gezogen werden können, um weitere zu laden. Für die Implementierung der Funktion „Mehr laden“ stehen online Plug-Ins zur Verfügung, z. B. die bekannten Funktionen „Pull-Up zum Laden von mehr“ und „Pull-Down zum Aktualisieren“, die mit iscroll.js implementiert werden.

Aber die praktische Anwendung ist sehr mühsam. Da es sich um ein Plug-In eines Drittanbieters handelt, muss es gemäß der von der anderen Partei definierten Methode verwendet werden, was sich bei der Verwendung immer als sehr unangenehm anfühlt. Darüber hinaus integriert iscroll.js selbst keine weiteren Funktionen und muss selbst erweitert werden. Wenn Sie iscroll.js weiterhin zum Laden weiterer Funktionen verwenden möchten, können Sie sich den oben angegebenen Link ansehen.

Im h5-Projekt muss eine einfache Paging-Funktion implementiert werden. Da es sich um ein mobiles Endgerät handelt, wäre es besser, „Load More“ zu verwenden, anstatt Seiten auf der PC-Seite umzublättern.

Mehr laden basierend auf Schaltflächen

Der einfachste Weg besteht darin, eine Schaltfläche „Mehr laden“ anzugeben. Wenn noch Daten vorhanden sind, klicken Sie darauf, um mehr zu laden, und ziehen Sie weiterhin einige Daten ab. Bis keine Daten mehr vorhanden sind. Zu viele Daten. Blenden Sie die Schaltfläche „Mehr laden“ aus.

Der Effekt ist wie folgt:

Seiten-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>

Weiteren Schaltflächenstil laden: 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调用成功后才决定显示与否*/
}

Weiteren JS-Code laden:

$(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);
  });
});

Hier gibt es nicht viel Code. Unter diesen ist getData(pageStart, pageSize) der Geschäftslogikcode, der für das Abrufen von Daten vom Server verantwortlich ist. Hier ein Beispiel:

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;);
    }
  });
}

Es ist immer noch relativ einfach.

Mehr laden basierend auf Scroll-Ereignissen
Oben haben wir implementiert, mehr zu laden, indem wir auf die Schaltfläche klicken, und der Gesamtvorgang ist relativ einfach. Hier biete ich eine weitere Möglichkeit an, mehr zu laden: basierend auf Scroll-Ereignissen.

Den Code direkt eingefügt:

$(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);
    }
  });
});

Es ist ersichtlich, dass sich der Code nicht wesentlich geändert hat. Dies hängt hauptsächlich von den Beurteilungsbedingungen im Kerncode ab: beim Scrollen 100 Pixel über dem unteren Rand, um neue Inhalte zu laden.

Geschäftslogik getData(pageStart, pageSize) muss nur die Logik in if ( (offset + size) >= sum) ändern zu:

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

.

Natürlich gibt es noch Bereiche, die optimiert werden müssen, wie zum Beispiel: Wie kann verhindert werden, dass der Server zu schnell scrollt und mehrere Anfragen verursacht, bevor der Server Zeit zum Antworten hat?

Umfassendes Beispiel

Anhand des obigen Beispiels wird deutlich, dass das zweite besser ist, ohne dass man klicken muss. Bei der zweiten Methode gibt es jedoch ein Problem:

Wenn Sie die Seitengröße so einstellen, dass jedes Mal 2 oder 3 Elemente angezeigt werden (Größe = 2) und die Gesamtzahl der Datensätze 20 beträgt, werden Sie das feststellen Sie können kein Scrollen nach unten auslösen, um mehr Logik zu laden. Zu diesem Zeitpunkt wäre es schön, einen Klick-Button zu haben, um mehr zu laden.

Daher können wir die beiden oben genannten Methoden kombinieren:

Standardmäßig werden Scroll-Ereignisse verwendet, um mehr zu laden. Wenn die angezeigte Anzahl zu klein ist, reicht sie nicht aus, um auszulösen Scrollen Sie nach unten, um mehr zu laden. Wenn mehr Logik vorhanden ist, verwenden Sie mehr Klickereignisse zum Laden.
Hier habe ich einfach das Verhalten beim Laden von mehr abstrahiert und ein einfaches Plug-in geschrieben:

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);

Wie verwende ich es? Es ist ganz einfach:

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

Der erste Parameter ist die Rückruffunktion, die unsere Geschäftslogik ist. Ich habe die endgültige modifizierte Geschäftslogikmethode gepostet:

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;);
    }
  });
}