直接上核心代码,其实官网介绍的很详细:

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 滚动加载的更多相关文章

  1. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  2. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...

  3. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

  4. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  5. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  6. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  7. 兼容IE8,滚动加载下一页

    // 滚动加载下一页         var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrol ...

  8. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  9. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

随机推荐

  1. 【LiteOS】STM32F103-LiteOS移植教程(详细篇)

    总览 本文基于STM32F103C8T6,详细讲述华为LiteOS的移植过程.开发工具是MDK5.LiteOS官方已经适配过cortex M系列内核的单片机,因此移植过程非常简单. LiteOS有两种 ...

  2. 区块链学习笔记:D03 区块链在各行业领域的应用(一)

    今天主要是学习了区块链在金融和供应链领域的应用,重点体现了区块链多方参与.透明可信.防篡改防抵赖的技术优势 区块链的应用场景最早是在金融行业应用较多,后续逐步扩展到传统行业,如:供应链.政务服务.物联 ...

  3. gdb调试常用方法介绍

    一.概述   GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.没有统一的界面,所有的操作都是通过命令的方式进行提供.对于习惯了图形界面方式进行调试的猿猿来说可能不是很顺手,但是如果你在 ...

  4. Android Studio 3.0下创建menu布局文件的图例

    当开始一个android app的时候,android studio项目中没有看到menu文件夹:如下所示: 当要添加一个按钮时,很多文档上都会说,通过在项目的 res/menu 目录中新增一个 XM ...

  5. iCamera App Kit 使用说明

    一.概述 1.前言 iCamera是层层惊涛设计室推出的一款轻量级的摄像头开发调试工具,该工具可以用于市面上绝大多数摄像头的配置.调试.图像采集. iCamera主要作为摄像头开发调试工具,暂时不针对 ...

  6. 【HTTP】HTTP 的15个常见知识点复习

    前言 自从入职新公司到现在,我们前端团队内部一直在做 ?每周一练 的知识复习计划,我之前整理了一个 每周一练 之 数据结构与算法 学习内容,大家也快去看看~~ 最近三周,主要复习 网络基础 相关的知识 ...

  7. RNN循环神经网络

    1.为什么还会有RNN? CNN(卷积神经网络)我们会发现, 他们的输出都是只考虑前一个输入的影响而不考虑其它时刻输入的影响, 比如简单的猫,狗,手写数字等单个物体的识别具有较好的效果. 但是, 对于 ...

  8. cygwin报错 /bin/bash: Operation not permitted

    如题,使用Cygwin过程中本来好好的,突然就不能登录了,每个用户登录都报错 /bin/bash: Operation not permitted.开始也以为是没有权限之类的,重装弄了很久也不行.后面 ...

  9. 使用 Vue + axios 时,返回状态200,返回值被浏览器拦截

    目录 一.前言 二.解决方案 1. 在全局定义 2. 单独定义 一.前言 在使用 Vue + TypeScript + axios 时,后端已经配置了Cors的前提下,但是在请求接口的时候,返回状态为 ...

  10. Instrument API介绍

    1. Instrumentation介绍  JVMTI(JVM Tool Interface)是 Java 虚拟机所提供的 native 编程接口,是 JVMPI(Java Virtual Machi ...