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入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
js控制input输入字符解析
Dec 27 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
JS实现购物车特效
Feb 02 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
VUE长按事件需求详解
Oct 18 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
js实现轮播图的完整代码
Oct 26 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使用反射插入对象示例分享
2014/03/11 PHP
PHP小教程之实现链表
2014/06/09 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
python中global与nonlocal比较
2014/11/21 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python实现杨辉三角思路
2017/07/14 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python生成九宫格图片
2018/11/19 Python
python 进程的几种创建方式详解
2019/08/29 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python中remove函数的踩坑记录
2021/01/04 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
公司成立感言
2014/01/11 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
大四学生思想汇报
2014/01/13 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
红白喜事主持词
2015/07/06 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript