h5上滑刷新(分页)
$('.dom').append('<div class="loadingwrap" id="loading" style="display:none"><img src="' + base + '../images/loading.gif"/></div>');
$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height() >= $(document).height()-10)){
var url = '',
totalPage = 4;
pageCount = Loader(url,totalPage,$('.dom'));
}
}); Loader = function(url, totalPage, el) {
var scrollflag = true; if (scrollflag) {
if (pageCount <= totalPage) {
$('#loading,.loadingwrap').show();
$.ajax({
type: 'POST',
url: url,
data: {page: pageCount},
dataType: 'json',
beforeSend: function () {
scrollflag = false;
$('#loading').show();
},
success: function (result) {
el.append(result.data);
pageCount++;
},
error: function (xhr, type) {
},
complete: function () {
scrollflag = true;
$('#loading,.loadingwrap').hide();
}
});
}
}
return pageCount;
}
h5上滑刷新(分页)的更多相关文章
- Ionic上滑刷新
上拉加载用的是ionic控件ion-infinite-scroll,使用示例如下: <ion-infinite-scroll (ionInfinite)="doInfinite($ev ...
- 移动端 H5 上拉刷新,下拉加载
http://www.mescroll.com/api.html#options 这里有几个重要的设置 1.down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决 2.up 中的 a ...
- H5上滑跳转页面
方法一: jquery方法 movePage($('body')); function movePage(dom) { var startY, moveY, moveSpave; dom.on(&qu ...
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...
- 使用MJRefresh遇到的一个问题,上拉刷新后tableview瞬间滑到最底部
最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshvi ...
- Android的ListView分页功能(上滑加载更多)
今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- vue项目上滑滚动加载更多&下拉刷新
上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度 let innerHeight = document.querySelector("#sslist ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
随机推荐
- java总结第三次//类和对象2、3
四.类和对象2 主要内容:Java类的继承.方法的重写.覆盖.访问控制.super 关键字.多态性及其应用 1.继承 要求:Java只支持单继承,不允许多重继承 一个子类只能有一个父类 一个父类可以派 ...
- 解决tomcat占用8080端口问题图文教程
在dos下,输入 netstat -ano|findstr 8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill /pid 6856 /f //说明,运行 ...
- 161207、高并发:java.util.concurrent.Semaphore实现字符串池及其常用方法介绍
实现字符串池: StrPool.java import java.util.ArrayList; import java.util.List; import java.util.concurrent. ...
- asp显示记录条数
Sql = "select * from xin126 where ID=" & id Rs.Open Sql,Conn,1,1 %> 共有<strong st ...
- CDN流量放大攻击思路
首先,为了对CDN进行攻击,我们必须清楚CDN的工作原理,这里我们再来简单介绍一下CDN的工作模型. CDN的全称是Content Delivery Network(内容分发网络),通过在网络各处的加 ...
- taglib指令
taglib:用来引用标签库并设置标签库的前缀,(允许JSP页面使用用户自定义标签) 语法:<%@ taglib uri="tagLibraryURI" prefix=&qu ...
- How To Set Up Apache Virtual Hosts on CentOS 6
About Virtual Hosts 虚拟主机,用于在一个单一IP地址上,运行多个域.这对那些想在一个VPS上,运行多个网站的人,尤其有用.基于用户访问的不同网站,给访问者显示不同的信息.没有限制能 ...
- thinkphp3.2 分页方式汇总
//自定义分页 $page = $_GET['page'] ? $_GET['page'] : 1 ; $count = $this->Table("user")->c ...
- 3、JavaScript
1. JavaScript简介 1.1. JavaScript由来 Netscape 发明了 JavaScript JavaScript由Netscape 在1995年发明.早期的主要目的是处理 ...
- [ios][opengles]OpenGL ES基础知识简介
参考: http://www.cnblogs.com/shangdahao/archive/2011/11/05/2233587.html 3D变换:模型,视图,投影与Viewport: http:/ ...