js实现加载更多功能实例


Posted in Javascript onOctober 27, 2016

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

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

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

基于按钮实现加载更多

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

效果如下:

js实现加载更多功能实例

页面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 +='<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)事件。

直接贴代码了:

$(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,你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。

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

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

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 +='<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!');
    }
  });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 #Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 #Javascript
node.js文件上传处理示例
Oct 27 #Javascript
Vue.js表单控件实践
Oct 27 #Javascript
vue实现可增删查改的成绩单
Oct 27 #Javascript
vuex实现简易计数器
Oct 27 #Javascript
微信小程序  生命周期详解
Oct 27 #Javascript
You might like
PHP动态图像的创建
2006/10/09 PHP
NOT NULL 和NULL
2007/01/15 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
简单三步,搞掂内存泄漏
2007/03/10 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
js如何打印object对象
2015/10/16 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python any()函数的使用方法
2019/10/28 Python
基于python实现模拟数据结构模型
2020/06/12 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
反邪教警示教育方案
2014/05/13 职场文书
个人求职信格式范文
2015/03/20 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2015国庆节感想
2015/08/04 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL