jquery 点击加载更多
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"></<span class="hljs-name">ul</span>></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 点击加载更多的更多相关文章
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题。 就好比我来说,我两个都用。我深知这两个平台的优缺点。所以,我决定分享我关于这两个移动平台的观点。另外,然后谈谈我对新的 Ubuntu 移动平台的印象和它的优势。 IOS 的优点 虽然这些天我是个十足的 Android 用户,但我必须承认 IOS 在某些方面做的是不错。首先,苹果公司在他们的设备更新方面有更
Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题. 就好比我来说,我两个都用.我深知这两个平台的优缺点.所以,我决定分享我关于这两个移动平台的观点.另外,然后谈谈 ...
- python 指定画图分辨率
from IPython.core.pylabtools import figsize # import figsize figsize(12.5, 4) # 设置 figsize plt.rcPar ...
- 安装memcached和elasticsearch服务并systemctl管理
[root@izbp18dv3a3metugyd02qxz bin]# rpm -qa | grep memcache [root@izbp18dv3a3metugyd02qxz bin]# yum ...
- mac 外接屏幕切换操作
mac 屏幕小,可外接合适的屏幕扩展.接好屏幕后: 在 mac 系统变化中看到显示器字样, 点击排列,可以看到一个白色的条状色块,即为主屏幕.(镜像显示不能选中) 在 mac 怎么打开一个应用,在其中 ...
- TCP服务器并发编程构架:完成端口IOCP模式
windows下socket网络编程模式:IOCP 完成端口 1)IOCP异步事件的获取放到操作系统的网络驱动层来处理,实际上反而是降低了编程难度, 2)同时对于多线程的并发调度,也放到操作系统级别来 ...
- SpringBoot属性配置-第三章
1.application.yml配置#自定义参数对象book: name: A id: 1 page: 100 2.创建实体类: /** * @Auther: youqc * @Date: 2018 ...
- bytesToSize
export function bytesToSize(bytes){ if (bytes === 0) return '0 B' let k = 1024, // or 1000 sizes = [ ...
- Linux内核调试方法总结之backtrace
backtrace [用途]用户态或者内核态程序异常退出时回溯堆栈信息 [原理]通过对当前堆栈的分析,回溯上层函数在当前栈中的帧地址,直至顶层函数.帧地址是指在栈中存在局部变量.上一级函数返回地址.寄 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_5_File类获取功能的方法
获取的方法 GetAbsolutepath 传递一个相对路径进去,查看输出的结果 输出的还是绝对的路径 getPath 获取的就是构造方法中传递的路径,可以传递绝对路径也可以传递相对路径 实际上toS ...
- shift()函数
用于对dataframe中的数整体上移或下移, 当为正数时,向下移. 当为负数时,向上移. 缺少的会填充NaN 参考: https://blog.csdn.net/kizgel/article/det ...