html部分

  <ul class="bill moreadd">
<div class="total"><span>-</span><span>23756.177</span></div>
<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></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></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>
</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>
</li>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class=“more” data-total=“3” data-page=“1”>加载更多</span>
$('.more').on('click', function () {
var baseurl = $('#baseurl').val();
var type = $.trim($(this).attr('data-type'));
var total = parseInt($(this).attr('data-total'));
var page = parseInt($(this).attr('data-page'));
$.ajax({
url: './lib/js/more' + page + '.json',
type: 'get',
dataType: "json",
data: { page: page + 1 },
success: function (res) {
var result = '';
// console.log(res.lists)
var list = res.lists
$('.more').attr('data-page', page + 1);
for (var i = 1; i < list.length; i++) {
console.log(res.lists[i])
result += '<li>'
+ '<div class="left">'
+ '<p class="type">' + res.lists[i].price + '</p>'
+ '<p class="time">' + res.lists[i].date + '</p>'
+ '</div>'
+ '<div class="right">' + res.lists[i].name + '</div>'
+ '</li>'
}
$('.moreadd').append(result);
<span class="hljs-keyword">if</span> (page + <span class="hljs-number">1</span> == total) {
$(<span class="hljs-string">'.more'</span>).remove();
}
}
});
});

注意

这里的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. sh_09_格式化输出

    sh_09_格式化输出 # 定义字符串变量 name,输出 我的名字叫 小明,请多多关照! name = "大小明" print("我的名字叫 %s,请多多关照!&quo ...

  2. linux 多进程并发服务__关于子进程回收的方法

    以TCPServ 服务程序来说: 1)父进程:负责系统初始化,以及监听(listen),接受连接请求(accept);其中accept 默认阻塞调用. 2)每接受一个连接请求,动态新建(fork)一个 ...

  3. C. Almost Equal

    C. Almost Equal n个数字全排成一个圈,满足任意相邻n个之和之间最大最小值之差不超过1 n为偶数时 不存在 n为奇数,构造 #include<bits/stdc++.h> u ...

  4. 微信小程序之登录用户不是该小程序的开发者

    当uniapp项目转为小程序项目的时候,预览会显示“您不是登录用户...”,所以没有办法发布,这个时候打开“project.config.json”设置一下appid,与你公众号appid一致就可以

  5. php正则匹配汉字提取其它信息剔除和验证邮箱

    正则匹配汉字提取其它信息剔除demo <?php //提取字符串中的汉字其余信息剔除 $str='te,st 测 .试,.,.?!::·…~&@#,.?!:;.……-&@#“” ...

  6. 在Ubuntu18.04下安装Java 11

    一直以来,本人都使用第三方软件包"ppa:linuxuprising/java"安装Java JDK,最近一次安装时发现无法成功.这是由于现在无法直接从Oracle官网下载Java ...

  7. 禁止、允许MySQL root用户远程访问权限

    关闭MySQL root用户远程访问权限: use mysql; update user set host = "localhost" where user = "roo ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_5_定义和使用含有泛型的接口

    定义泛型接口 Scanner的接口 接口的实现类.实现这个接口,规定数据类型为String类型 ArrayList是List接口的实现类 再看下List接口的源码 泛型实现类也定义为泛型 重写泛型的方 ...

  9. 升级到mysql5.7无法启动问题解决

    漏洞扫描,老项目升级到5.7位成功,启动发现报错:unknown option log_error 线备份my.cnf配置文件, 猜测应该是写法有问题,先把log_error  改成log #log_ ...

  10. 2017埙箫简谱清单分享(附音频Demo)

    前言 习箫五载,略有所获,皆在坚持. 本博文记录旨在记录练习过程中所录制的Demo以供自省.自娱.自乐,同时记录.分享简谱与箫友(目前为简谱,日后学会线谱后会添加相应谱子分类). 简谱 &&a ...