js는 더 많은 함수 인스턴스 로드를 구현합니다.

프로젝트의 프런트엔드 페이지에 구매한 제품이 표시되는 경우, 더 많은 제품을 로드하려면 아래로 당겨야 합니다. "더 보기" 기능을 구현하는 방법에 대해서는 iscroll.js를 사용하여 구현된 잘 알려진 더 보기 풀업 및 새로 고침 기능을 위한 풀다운과 같은 온라인에서 사용할 수 있는 플러그인이 있습니다.

그러나 실제로 사용하기에는 매우 번거롭습니다. 타사 플러그인이기 때문에 상대방이 정의한 방법에 따라 사용해야 하는데, 항상 사용하기가 매우 불편합니다. 또한, iscroll.js 자체에는 더 많은 기능이 통합되어 있지 않으며 자체적으로 확장이 필요합니다. iscroll.js를 계속 사용하여 더 많은 기능을 로드하려면 위에 제공된 링크를 확인하세요.

h5 프로젝트에서는 간단한 페이징 기능을 구현해야 하는데, 모바일 단말이기 때문에 PC측에서 페이지를 넘기는 것보다는 "더보기"를 활용하는 것을 고려해 보시는 것이 좋을 것 같습니다.

버튼 기반 추가 로드

가장 간단한 방법은 추가 로드 버튼을 제공하는 것입니다. 아직 데이터가 있으면 클릭하여 추가 로드하고 몇 가지 데이터를 계속 가져옵니다. 더 이상 데이터가 없을 때까지 데이터가 너무 많으면 추가 로드 버튼을 숨깁니다.

효과는 다음과 같습니다:

페이지 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;/*默认不显示，ajax调用成功后才决定显示与否*/
}

더 많은 js 코드 로드:

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

여기에는 코드가 많지 않습니다. 그 중 getData(pageStart, pageSize)는 서버에서 데이터를 가져오는 역할을 하는 비즈니스 로직 코드입니다. 예를 들면 다음과 같습니다.

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

여전히 비교적 간단합니다.

스크롤 이벤트 기반 추가 로드
위에서는 버튼을 클릭하여 추가 로드를 구현했으며 전체적인 프로세스는 비교적 간단합니다. 여기에서는 스크롤 이벤트를 기반으로 더 많은 것을 로드하는 또 다른 방법을 제공합니다.

코드를 직접 붙여넣었습니다:

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

코드가 크게 변경되지 않았음을 알 수 있습니다. 주로 핵심 코드의 판단 조건에 따라 달라집니다. 하단에서 100픽셀, 새 콘텐츠를 로드합니다.

비즈니스 로직 getData(pageStart, pageSize)는 if((offset + size) >= sum)의 로직을

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

으로 변경하기만 하면 됩니다.

물론 다음과 같이 최적화해야 할 영역이 아직 남아 있습니다. 서버가 응답할 시간을 갖기 전에 서버가 너무 빠르게 스크롤하여 여러 요청을 발생시키는 것을 방지하는 방법은 무엇입니까?

종합예

위의 예를 보면 클릭하지 않고도 두 번째가 더 낫다는 것은 명백합니다. 하지만 두 번째 방법에는 문제가 있습니다.

매번 2~3개의 항목이 표시되도록 페이지 크기를 설정하고(size=2) 총 레코드가 20개이면 다음과 같은 결과가 나타납니다. 더 많은 로직을 로드하기 위해 아래로 스크롤할 수는 없습니다. 이때 더 많은 것을 로드하려면 클릭 버튼이 있으면 좋을 것 같습니다.

따라서 위의 두 가지 방법을 결합할 수 있습니다.

기본적으로 스크롤 이벤트를 사용하여 더 많이 로드합니다. 표시된 숫자가 너무 작으면 트리거하기에 충분하지 않습니다. 더 많은 로직을 로드하려면 아래로 스크롤하세요. 더 많은 로직이 있으면 더 많은 클릭 이벤트를 사용하여 로드하세요.
여기서는 more를 로드하는 동작을 간단히 추상화하고 간단한 플러그인을 작성했습니다.

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

어떻게 사용하나요? 간단합니다.

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

첫 번째 매개변수는 비즈니스 로직인 콜백 함수입니다. 최종 수정된 비즈니스 로직 메소드를 게시했습니다:

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