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 ...
随机推荐
- 华为云WeLink:智能工作空间,联接无限想象
[中国,上海,2019年9月19日] 在HUAWEI CONNECT 2019期间,华为办公应用装备部部长王俊先生代表华为云介绍WeLink--企业专属的智能工作空间.WeLink源于华为数字化办公实 ...
- 利用Mitmproxy抓包
http://mrpeak.cn/blog/mitmproxy/ 和Charles同样强大的免费抓包软件. 它是在终端操作的,界面没有Charles那么可视化.不过也很好用,通过各种快捷键操作,效 ...
- openlayers4 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- linux 根据端口关闭程序的管道命令
netstat -anp|grep :3306|head -n1|cut -d"/" -f1|sed 's/ /\r\n/g'|tail -n1|xargs -I{} kill - ...
- A.Changing Volume
题目:改变音量 题意:给定两个数a和b,有6个操作(-5, -2, -1, +1, +2, +5),求a变到b的最小操作次数 操作的过程中不能变到小于0,即音量不能调到小于0 分析: (贪心),我们可 ...
- 【Vuejs】269- 提升90%加载速度——vuecli下的首屏性能优化
前言 之前用 ,所以接下来还会介绍一些它们在优化上的异同 分析 vuecli 2.x自带了分析工具只要运行 npm run build --report 如果是 vuecli 3的话,先安装插件 cn ...
- 【JPA】映射
[JPA]映射 转载:https://www.cnblogs.com/yangchongxing/p/10120447.html 1.@Entity注解指定实体类 2.@Id注解指定实体主键 3.@T ...
- DefinePlugin插件用法
作者:水涛 座右铭:天行健,君子以自强不息 自白:我写博文上来蹭蹭就是干,我突然觉得我需要幽默一点了,好了,下面我们说正经的 一.官方定义: DefinePlugin DefinePlugin 允许创 ...
- 更新Preloader和uboot
在SoCEDS环境下编译和更新preloader和uboot程序的方法 前面有介绍preloader在HPS boot过程中的的作用,接下来讲述下用户在SoCEDS环境下改如何编译preloade ...
- 《Java知识应用》Java-线程池(ScheduledExecutorService)
先回顾一下,Runnable 的使用方法. package demo.knowledgepoints.scheduledtask.run; /*** * 线程类 */public class Thre ...