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 ...
随机推荐
- 17.leetcode 237. Delete Node in a Linked List
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...
- js prototype 继承
//继承 function inherits(ctor,superCtor){ ctor.super_ = superCtor; ctor.prototype = Object.create(supe ...
- SecureCRT 常用命令大全
常用命令:一.ls 只列出文件名 (相当于dir,dir也可以使用) -A:列出所有文件,包含隐藏文件. -l:列表形式,包含文件的绝大部分属性. -R:递归显示. --help:此命令的帮助. 二. ...
- Canvas: 优雅的代码作图系列:中国国旗
Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...
- ETL作业调度工具TASKCTL的两个重大突破
在传统设计理念下,流程图的可视化.作业流的定义设计功能,随着作业量增加,越来越难用,越来越不适用是一个难以避免的问题.就这两个问题,我给大家分享一下TASKCTL是如何转变思路.如何突破.如何带来一些 ...
- 关于flask线程安全的简单研究
flask是python web开发比较主流的框架之一,也是我在工作中使用的主要开发框架.一直对其是如何保证线程安全的问题比较好奇,所以简单的探究了一番,由于只是简单查看了源码,并未深入细致研究,因此 ...
- Oracle 安装报错 [INS-06101] IP address of localhost could not be determined 解决方法[转]
--安装Oracle 11gR2,报错:[INS-06101] IP address of localhost could not be determined--------------------- ...
- 程序设计中的数学思维函数总结(代码以C#为例)
最近以C#为例,学习了程序设计基础,其中涉及到一些数学思维,我们可以巧妙的将这些逻辑问题转换为代码,交给计算机运算. 现将经常会使用到的基础函数做一总结,供大家分享.自己备用. 1.判断一个数是否为奇 ...
- 关于Filter
[1].关于Filter Filter简介: Filter翻译为中文是过滤器的意思. Filter是JavaWeb的三大web组件之一Servlet.Filter.Listener Filter的作用 ...
- noip普及组2007 Hanoi双塔问题
Hanoi双塔问题 描述 给定A,B,C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆盘是不加区分的.现要将这些圆盘移到C柱上,在移动 ...