html部分

  1. <ul class="bill moreadd">
  2. <div class="total"><span>-</span><span>23756.177</span></div>
  3. <li>
  4. <div class="left">
  5. <p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p>
  6. </div>
  7. <div class="right">签到成功</div></li><li>
  8. <div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p>
  9. </div>
  10. <div class="right">签到成功</div></li><li><div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p></div><div class="right">签到成功</div>
  11. </li>
  12. <li>
  13. <div class="left">
  14. <p class="type">0.01000</p>
  15. <p class="time">2019-06-14 15:58:59</p>
  16. </div>
  17. <div class="right">签到成功</div>
  18. </li>
  19. <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
  20.  
  21. <span class=“more” data-total=“3” data-page=“1”>加载更多</span>
  1. $('.more').on('click', function () {
  2. var baseurl = $('#baseurl').val();
  3. var type = $.trim($(this).attr('data-type'));
  4. var total = parseInt($(this).attr('data-total'));
  5. var page = parseInt($(this).attr('data-page'));
  6. $.ajax({
  7. url: './lib/js/more' + page + '.json',
  8. type: 'get',
  9. dataType: "json",
  10. data: { page: page + 1 },
  11. success: function (res) {
  12. var result = '';
  13. // console.log(res.lists)
  14. var list = res.lists
  15. $('.more').attr('data-page', page + 1);
  16. for (var i = 1; i < list.length; i++) {
  17. console.log(res.lists[i])
  18. result += '<li>'
  19. + '<div class="left">'
  20. + '<p class="type">' + res.lists[i].price + '</p>'
  21. + '<p class="time">' + res.lists[i].date + '</p>'
  22. + '</div>'
  23. + '<div class="right">' + res.lists[i].name + '</div>'
  24. + '</li>'
  25. }
  26. $('.moreadd').append(result);
  27. <span class="hljs-keyword">if</span> (page + <span class="hljs-number">1</span> == total) {
  28. $(<span class="hljs-string">'.more'</span>).remove();
  29. }
  30. }
  31. });
  32. });

注意

这里的more.json 是本地测试数据,所以传入页码是 more1.json more2.json 换成接口的话,按照正常来就可以了。

jquery 点击加载更多的更多相关文章

  1. Jquery点击加载更多

    一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  2. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  3. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  4. PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  5. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  6. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  8. android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

    android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多

  9. ajax点击加载更多数据图片(预加载)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. spring mvc 数据校验(bean实体注解实现)

    spring mvc 数据校验 1.添加个jar (jar与一版本会冲突) <dependency> <groupId>com.fasterxml</groupId> ...

  2. spring中试用junit4测试

    一:加入jar包 <!-- 单元测试 --> <dependency> <groupId>junit</groupId> <artifactId& ...

  3. php array_shift()函数 语法

    php array_shift()函数 语法 作用:删除数组中第一个元素,并返回被删除元素的值.富瑞联华 语法:array_shift(array) 参数: 参数 描述 array 必需.规定数组. ...

  4. vim插件cscope使用方法

    一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...

  5. Java——GUI

    [AWT]    <1>AWT(Abstract Widow Toolkit)包含了很多类和接口,用于Java Application的GUI(Graphics User Interfac ...

  6. Java——容器(Set)

    [Set接口] <1>Set接口是Collection的子接口,Set接口没有提供额外的方法. <2>实现Set接口的容器类中的元素是没有顺序的,而且不可以重复. <3& ...

  7. new Date(str)返回 Invalid date问题

    var date=new Date($("input[name='mettingTime']").val().replace(/-/g, "/")); var ...

  8. 《SQL Server 2012 T-SQL基础》读书笔记 - 3.联接查询

    Chapter 3 Joins Cross Joins(交叉联接)就是返回两个表的笛卡尔积(m行的表cross join一个n行的表得到一个m * n行的结果),它有两种标准SQL语法,第一种: SE ...

  9. Hypermesh中弹簧单元设置

    1D >> springs 单元类型 CBUSH1D 单元属性 PBUSH1D

  10. 几个FFmpeg 视频参数 fps、tbr、tbn、tbc

    我们用Ffplay播放文件或者视频流命令行会出现fps.tbr.tbn.tbc等参数如下图所示 图1 ffplay 播放文件示意图 fps表示平均帧率,总帧数除以总时长(以s为单位). tbr  表示 ...