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

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. 【Python成长之路】装逼的一行代码:快速共享文件【华为云分享】

    [写在前面] 有时候会与同事共享文件,正常人的操作是鼠标右键,点击共享.其实有个装逼的方法,用python的一行代码快速实现基于http服务的共享方式. [效果如下] [示例代码] 在cmd窗口进入想 ...

  2. PHY6202 蓝牙4.0NRF51802

    PHY6202可以替代NRF51802/NRF51822的虽然PHY6202是蓝牙4.0,但它同时可是使用5.0的软件进行组网PHY6202 M0内核,封装:QFN48/32基本参数:ARM CORT ...

  3. react文本溢出hover气泡显示全部文本——JS判断文本溢出

    需求: 在文本溢出的时候,显示气泡 JS相关知识 // target js元素 const containerLength = target.width; //当前容器的宽度 const textLe ...

  4. CoderForces-617B

    Bob has a favorite number k and ai of length n. Now he asks you to answer m queries. Each query is g ...

  5. Qt5教程: (9) Qt多线程

    目录 0. 创建工程 1. QThread 源码一览 2. QThread相关方法介绍 2.1 启动线程 2.2 关闭线程 2.3 阻塞线程 2.4线程状态判断 2.5 设置优先级 2.6 信号 3. ...

  6. 【Java】在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。

    题目描述: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...

  7. Android WebView 基本设置与H5 交互

    mWebView.setDrawingCacheEnabled(true); WebChromeClient webChromeClient = new WebChromeClient(); mWeb ...

  8. django路由匹配层

    目录 orm表关系如何建立 一对多 多对多 一对一 django请求生命周期流程图 路由层 路由的简单配置 Django路由匹配规律 分组 无名分组 有名分组 反向解析 路由分发 名称空间 伪静态 虚 ...

  9. 第二次作业-titanic数据集练习

    一.读入titanic.xlsx文件,按照教材示例步骤,完成数据清洗. titanic数据集包含11个特征,分别是: Survived:0代表死亡,1代表存活Pclass:乘客所持票类,有三种值(1, ...

  10. AQS系列(六)- Semaphore的使用及原理

    前言 Semaphore也是JUC包中一个用于并发控制的工具类,举个常用场景的例子:有三台电脑五个人,每个人都要用电脑注册一个自己的账户,这时最开始只能同时有三个人操作电脑注册账户,这三个人中有人操作 ...