Swiper+JS 上拉刷新
JS
// 上拉刷新
var page = 2;
var isAjax = true;//加载数据前状态
$("#dataTable,#AuditthroughDt,#AuditrejectedDt,#CancelDt,#CancelDtA,#UnauditedDt").scroll(function () {
var viewH = $(this).height();//滚动区域可视区域
var contentH = $(this).get(0).scrollHeight;//滚动区域内容实际高度
var scrollTop = $(this).scrollTop();//滚动条高度
var freshH = contentH - viewH - scrollTop;
var timer;
if (isAjax && freshH == 0) {
if (finished == false) {
isAjax = false;//加载数据中状态
$('.dropload-down').css('display', 'block');
AjaxOrderList(page, orderState);
page++;
$('.dropload-down').css('display', 'none');
$(dom).scrollTop(contentH);
isAjax = true;//数据加载完后,重新赋值为初始状态
}
}
});
html:
<div class="content">
<div class="swiper-container" id="swiper-container1">
<div class="swiper-wrapper" id="orderState">
<div class="swiper-slide hascolor" title="-1">全部订单</div>
<div class="swiper-slide" title="1">已审核</div>
<div class="swiper-slide" title="2">审核驳回</div>
<div class="swiper-slide" title="3" >订单取消</div>
<div class="swiper-slide" title="4">取消申请中</div>
<div class="swiper-slide" title="5">待审核</div>
</div>
</div>
<div class="swiper-slide">
<div id="AuditthroughDt" data-type="1" class="allOrder yscroll">
<div id="AuditDiv">
<ul id="AuditDiv1"></ul>
</div>
<div class="dropload-down" style="display:block;">
<div class="dropload-load">
<span class="loading"></span>加载中...
</div>
</div>
</div>
</div>
许多类此的DIV
Swiper+JS 上拉刷新的更多相关文章
- js上拉刷新数据
$(window).scroll(function () { //下面这句主要是获取网页的总高度,主要是考虑兼容性所以把Ie支持的documentElement也写了,这个方法至少支持IE8 var ...
- iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- mui上拉刷新+下拉加载
具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法
HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...
- 【UI组件】——用jQuery做一个上拉刷新
技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...
- iScroll示例,下拉刷新,上拉刷新
iScroll示例,下拉刷新,上拉刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
随机推荐
- ubuntu 手动安装openssh-server
先用能上网的机器下载:zlib-1.2.5.tar.openssh-5.6p1.tar.gz.openssl-0.9.8o.tar.tar,接下来,准备安装. 步骤如下: 1.首先解压安装zlib:t ...
- [js高手之路]es6系列教程 - 解构详解
解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...
- HttpRequest 类
关于此类的介绍:查看HttpRequest类 点击查看:HttpRequest中方法的封装 跟这个类对应的HttpResponse类 定义:使 ASP.NET 能够读取客户端在 Web 请求期间发送的 ...
- viewpager+layout布局文件随数据多少创建滑动页面
近期在做一个答题类型的APP,而其中最重要的是答题卡.而答题卡要如何做? 1.将数据插入到SQLite数据库中 2.建立entity实体包,创建实体类,封装. 3.创建实体与view的List集合 4 ...
- Java Collection(转载)
在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对 抽象数据类型操作的API,而这是我们常用的且在数据 ...
- NYOJ 23.取石子(一)
取石子(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 一天,TT在寝室闲着无聊,和同寝的人玩起了取石子游戏,而由于条件有限,他/她们是用旺仔小馒头当作石子.游 ...
- TestNG的组测试和组中组测试
在编写测试的过程中,我们经常遇到只想执行个别或者某一部分/某一类型的测试用例,这时我们可以使用TestNG的分组测试方法 分组测试在配置时,TestNG执行的原则是:只保留最小集合进行执行 看代码: ...
- 扩展Python模块系列(三)----参数解析与结果封装
在上一节中,通过一个简单的例子介绍了C语言扩展Python内建模块的整体流程,从本节开始讲开始深入讨论一些细节问题,在细节讨论中从始至终都会涉及[引用计数]的问题.首先讨论C语言封装的Python函数 ...
- Android -- AsyncTask源码解析
1,前段时间换工作的时候,关于AsyncTask源码这个点基本上大一点的公司都会问,所以今天就和大家一起来总结总结.本来早就想写这篇文章的,当时写<Android -- 从源码解析Handle+ ...
- 【社交系统研发日记五】ThinkSNS+如何计算字符显示长度?
今天我们来聊一下可能很多人都会头疼的东西:显示长度. 需求是这样的,在字符的显示上,两个英文单词才占一个中文或者其他语言的显示长度.如下: 上面排的是两个英文字母,一个汉字,一个Emoji.你会发现, ...