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 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php实现mysql同步的实现方法
2009/10/21 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python绘制雪景图
2019/12/16 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
如何执行一个shell程序
2012/11/23 面试题
2015年元旦文艺汇演主持词
2014/03/26 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
保护黄河倡议书
2014/05/16 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
导游词之无锡古运河
2019/11/14 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
关于Vue中的options选项
2022/03/22 Vue.js
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA