layui 滚动加载
直接上核心代码,其实官网介绍的很详细:
var pageSize = 5;//每次请求新闻的条数
flow.load({
elem: '#newsList' //指定列表容器
,scrollElem: '#newsList'//滚动条所在元素
,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页的回调
$.ajax({
type: "POST",
dataType: "json",
data: {'pageIndex': page,'pageSize':pageSize},//请求的页码和每页显示条数
async: true,
url: '/news/list.do',
success: function (result) {
var lis = [];
if (result.req && result.rows.length > 0) {//数据插入
//result.rows为Ajax返回的新闻数据
layui.each(result.rows, function(index, item){
var newsHtml = '<span news-id="'+item.id+'">'+ item.title +'</span>';
lis.push(newsHtml);
}); //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//result.total为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < Math.ceil(result.total/pageSize));
} }
});
}
});
layui 滚动加载的更多相关文章
- HTML5商城开发一 楼层滚动加载数据
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...
- js 滚动加载iframe框中内容
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 记录WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- 兼容IE8,滚动加载下一页
// 滚动加载下一页 var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrol ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)
新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...
随机推荐
- 给各位PHP程序员十点未来的建议
PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...
- 数据库Oracle通用函数
通用函数:可用于任意数据类型,并且适用于空值.• NVL (expr1, expr2) • NVL2 (expr1, expr2, expr3) • NULLIF (expr1, expr2) • C ...
- HihoCoder1449 后缀自动机三·重复旋律6
描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi想知道一部作品中所有长度为K的旋律中出现次数最多的旋律的出现次数.但是K不是固定的,小Hi想知道对 ...
- 洛谷 题解 P1600 【天天爱跑步】 (NOIP2016)
必须得说,这是一道难题(尤其对于我这样普及组205分的蒟蒻) 提交结果(NOIP2016 天天爱跑步): OJ名 编号 题目 状态 分数 总时间 内存 代码 / 答案文件 提交者 提交时间 Libre ...
- C语言之推箱子游戏代码
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:Yan_Less 正文 新手注意:如果你学习遇到问题找不到人解答,可以点 ...
- 使用flatbuffers
问题 张三是个java程序员,他写产生数据的程序.李四是个python程序员,他要用python处理张三产生的数据.最直观常用的方法就是张三用java把产生的数据保存成csv或者xml文件,然后李四用 ...
- 稳定易用的 Django 分页库,完善分页功能
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在 通过 Django Pagination 实现简单分页 中,我们实现了一个简单的 ...
- SOCKET CAN的理解
转载请注明出处:http://blog.csdn.net/Righthek 谢谢! CAN总线原理 由于Socket CAN涉及到CAN总线协议.套接字.Linux网络设备驱动等.因此,为了能够全面地 ...
- CCF-CSP题解 201803-3 URL映射
题目要求写一个简易的URL规则和URL地址匹配的程序. 说说我的思路. 将URL规则和地址都截成片段用结构体\(<type, str[]>\)存储.对于URL规则,\(type\)为0代表 ...
- 为什么使用HTTP2?
最近我们公司的官网由原来的http1.1已升级到http2,而我们前端开发对http2还是一片懵懂,更不知道为何换成了这个,故此补充了下http2的相关知识. http1.1相比于http1.0有哪些 ...