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 ...
随机推荐
- 华为云ModelArts 2.0全面升级,革新传统AI开发模式
[中国,上海,9月20日] 在HUAWEI CONNECT 2019期间,华为云EI服务产品部总经理贾永利宣布--华为云AI重装升级,并重磅发布一站式AI开发管理平台ModelArts 2.0. 现场 ...
- [转载]C++中四种强制类型转换方式
C++中四种强制类型转换方式 原文地址:http://www.cnblogs.com/home123/p/6763967.html 类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单( ...
- 前后台分离的 NET Core 通用权限管理系统
前言 从事软件开发这个行业现在已经有十几年了,项目无论大小权限认证.授权模块总是或多或少有功能需求的,这一块费时费力但是又存在于后台,使用最多的可能是运维人员所以处于出力不讨好的尴尬地位,每次有新的项 ...
- apache thrift 和 apache jersey 记录
几篇好的入门文档链接: 1. Hello World by Thrift Using Java 2. Thrift 实例 Helloworld 3. Thrift版的Hello World 4. Th ...
- 卸载&&更新docker(ubuntu)
卸载docker: apt-get purge lxc-docker apt-get autoremove 更新docker: apt-get update apt-get install lxc-d ...
- Spring Boot 整合 Druid
Spring Boot 整合 Druid 概述 Druid 是阿里巴巴开源平台上的一个项目,整个项目由数据库连接池.插件框架和 SQL 解析器组成.该项目主要是为了扩展 JDBC 的一些限制,可以让程 ...
- js练习-两个栈实现队列
目录 题 解 题 现在有个Q队列和栈A,栈B,栈只有两个方法,push()和pop(), 队列也只有两个方法,push()和pull(),队列的进和出都只能通过A和B的push和pop实现. // 大 ...
- mac端口占用
lsof -i tcp:port 可以查看该端口被什么程序占用,并显示PID port 替换成端口号, eg: lsof -i tcp:8081 kill pid 杀死PID
- ARTS-S mongo关闭与启动
关闭 mongo admin --eval "db.shutdownServer()" 删除dbdata目录下的mongo.lock 启动 /usr/bin/mongod --db ...
- 云服务器+域名+hexo 搭建博客
1 阿里云服务器安全组规则中启用80,4000,22端口, 记得出方向也要设置,否则... 2 域名指向服务器ip 3 安装git yum install git 4 安装node.js 下载地址为: ...