js实现加载更多功能实例

来源：互联网发布：知乎汉景帝杀吴太子编辑：程序博客网时间：2024/05/21 12:39

这篇文章主要介绍了js实现加载更多功能的方法,以实例演示了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下

项目的一个前端页面展示已购买商品时，要求能下拉加载更多。关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。

但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。

h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。

基于按钮实现加载更多

最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。

效果如下：

页面html：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<divclass="content">
  <divclass="weui_panel weui_panel_access">
    <divclass="weui_panel_hd">文章列表</div>
    <divclass="weui_panel_bd js-blog-list">
       
    </div>
  </div>
   
  <!--加载更多按钮-->
  <divclass="js-load-more">加载更多</div>
   
</div>
<scriptsrc="js/zepto.min.js"></script>

加载更多按钮样式：loadmore.css:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@charset"utf-8";
 
.js-load-more{
  padding:015px;
  width:120px;
  height:30px;
  background-color:#D31733;
  color:#fff;
  line-height:30px;
  text-align:center;
  border-radius:5px;
  margin:20pxauto;
  border:0none;
  font-size:16px;
  display:none;/*默认不显示，ajax调用成功后才决定显示与否*/
}

加载更多的js代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
 
  /*初始化*/
  varcounter = 0; /*计数器*/
  varpageStart = 0; /*offset*/
  varpageSize = 4; /*size*/
   
  /*首次加载*/
  getData(pageStart, pageSize);
   
  /*监听加载更多*/
  $(document).on('click','.js-load-more',function(){
    counter ++;
    pageStart = counter * pageSize;
     
    getData(pageStart, pageSize);
  });
});

这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码，负责从服务端拉去数据。这里给个示例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
functiongetData(offset,size){
  $.ajax({
    type:'GET',
    url:'json/blog.json',
    dataType:'json',
    success:function(reponse){
   
      vardata = reponse.list;
      varsum = reponse.list.length;
   
      varresult = '';
       
      /****业务逻辑块：实现拼接html内容并append到页面*********/
       
      //console.log(offset , size, sum);
       
      /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
      * 例如分页数是5，只剩2条，则只取2条
      *
      * 实际MySQL查询时不写这个不会有问题
      */
      if(sum - offset < size ){
        size = sum - offset;
      }
       
      /*使用for循环模拟SQL里的limit(offset,size)*/
      for(vari=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!');
    }
  });
}

还是比较简单的。

基于滚动事件实现加载更多
上面我们通过按钮点击实现加载更多，整体过程还是比较简单的。这里，我提供另一种方法实现加载更多：基于于滚动(scroll)事件。

直接贴代码了：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function(){
 
  /*初始化*/
  varcounter = 0; /*计数器*/
  varpageStart = 0; /*offset*/
  varpageSize = 7; /*size*/
  varisEnd = 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)里面的逻辑改成：

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

就行了。

当然，这里面还有要优化的地方，例如：如何防止滚动过快，服务端没来得及响应造成多次请求？

综合实例

通过上面的例子，显然第二种更好，不用去点击。但是第二个方法有个问题：

如果设置页面大小每次显示2条或3条(size=2)，总记录是20，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。

因此，我们可以把以上两种方法合在一起：

默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。
这里，我对加载更多这个行为进行简单的抽象，写了个简单的插件：

loadmore.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*
 * loadmore.js
 * 加载更多
 *
 * @time 2016-4-18 17:40:25
 * @author 飞鸿影~
 * @email jiancaigege@163.com
 * 可以传的参数默认有：size,scroll 可以自定义
 * */
 
;(function(w,$){
   
  varloadmore = { 
    /*单页加载更多 通用方法
     *
     * @param callback 回调方法
     * @param config 自定义参数
     * */
    get : function(callback, config){
      varconfig = config ? config : {}; /*防止未传参数报错*/
 
      varcounter = 0; /*计数器*/
      varpageStart = 0;
      varpageSize = 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);

如何使用呢？很简单：

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

第一个参数是回调函数，即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
functiongetData(config, offset,size){
 
  config.isAjax = true;
 
  $.ajax({
    type:'GET',
    url:'json/blog.json',
    dataType:'json',
    success:function(reponse){
     
      config.isAjax = false;
 
      vardata = reponse.list;
      varsum = reponse.list.length;
       
      varresult = '';
       
      /************业务逻辑块：实现拼接html内容并append到页面*****************/
       
      //console.log(offset , size, sum);
       
      /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
      * 例如分页数是5，只剩2条，则只取2条
      *
      * 实际MySQL查询时不写这个
      */
      if(sum - offset < size ){
        size = sum - offset;
      }
 
       
      /*使用for循环模拟SQL里的limit(offset,size)*/
      for(vari=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;/*停止滚动加载请求*/
        //提示没有了
      }else{
        $(".js-load-more").show();
      }
    },
    error:function(xhr, type){
      alert('Ajax error!');
    }
  });
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

阅读全文

0 0