isscroll插件 实现下拉加载 上啦刷新 转
http://www.jb51.net/article/98394.htm
下面是别人的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll 实例：下拉刷新，滚动翻页</title>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} html {
-ms-touch-action: none;
} body,ul,li {
padding: 0;
margin: 0;
border: 0;
} body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
} #header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
} #footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
} #wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
} #scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
} #scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
} #scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
#pullDown,#pullUp,.pulldown-tips{
height:40px;
line-height:40px;
text-align:center;
}
.pulldown-tips{
position:absolute;
top:-40px;
left:0;
width:100%;
} </style>
</head>
<body onload="load()">
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class=""><div class="pullDownLabel"></div></div>
<div class="pulldown-tips">下拉刷新</div>
<ul id="list">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
</ul>
<div id="pullUp" class="">
<div class="pullUpLabel">加载更多</div>
</div>
</div>
</div> <div id="footer"></div>
<script type="text/javascript" src="build/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="build/iscroll-probe.js"></script>
<script type="text/javascript"> function load () {
var myScroll,
pullDown = $("#pullDown"),
pullUp = $("#pullUp"),
pullDownLabel = $(".pullDownLabel"),
pullUpLabel = $(".pullUpLabel"),
container = $('#list'),
loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新 pullDown.hide();
pullUp.hide(); myScroll = new IScroll("#wrapper", {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
scrollY:true,
probeType: 2,
bindToWrapper:true
});
myScroll.on("scroll",function(){
if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
if(this.y > 40){//下拉刷新操作
$(".pulldown-tips").hide();
pullDown.addClass("refresh").show();
pullDownLabel.text("松手刷新数据");
loadingStep = 1;
myScroll.refresh();
}else if(this.y < (this.maxScrollY - 14)){//上拉加载更多
pullUp.addClass("refresh").show();
pullUpLabel.text("正在载入");
loadingStep = 1;
pullUpAction();
}
}
});
myScroll.on("scrollEnd",function(){
if(loadingStep == 1){
if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep = 2;
pullDownAction();
}
}
}); function pullDownAction(){
setTimeout(function(){
var li, i;
for (i = 0,li = ""; i < 3; i++) {
li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
}
container.prepend(li);
pullDown.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
$(".pulldown-tips").show();
},1000);
}
function pullUpAction(){
setTimeout(function(){
var li, i;
for (i = 0,li = ""; i < 3; i++) {
li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
}
container.append(li);
pullUp.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
},1000);
} document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
} </script>
</body>
</html>
isscroll插件 实现下拉加载 上啦刷新 转的更多相关文章
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
- 基于Zepto移动端下拉加载（刷新），上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- 关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...
- 集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
- iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- iscroll5 上拉，下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
随机推荐
- HDU3629(凸四边形的个数)
HDU 3629 计算几何 题目描述:给你n个点(4~700), 问你能够成多少个不同的凸四边形. 解题报告: 暴力的话C(700,4)必然超时,发现,任何一个凹包必然是其中一点在其它3点构成的三角形 ...
- BNUOJ 52305 Around the World 树形dp
题目链接: https://www.bnuoj.com/v3/problem_show.php?pid=52305 Around the World Time Limit: 20000msMemory ...
- Java第二天——标识符命名规则、Java的知识、快捷键的使用、Scanner获取值的常用方法
1.标识符命名规则 字母.下划线.数字.美元符号($)由这四个部分组成. 标识符＝首字母+其他 首字母:字母.下划线.美元符号($) 其他:字母.下划线.数字.美元符号($) 注意: 1.首字母不能为 ...
- 将通过<input type="file">上传的txt文件存储在localStorage，提取并构建File对象
参考博文: JS 之Blob 对象类型 在本地存储localStorage中保存图片和文件 <input type="file" id="jobData" ...
- Gradle入门（4）：依赖管理
在现实生活中,要创造一个没有任何外部依赖的应用程序并非不可能,但也是极具挑战的.这也是为什么依赖管理对于每个软件项目都是至关重要的一部分. 这篇教程主要讲述如何使用Gradle管理我们项目的依赖,我们 ...
- Sysprep错误一则
准备搭建一台基于Windows2008的域控,通过ISO文件装完系统后,照例使用Windows Update打全了补丁.同时,考虑到经常使用Powershell,所以手动再装上了PS5.1 .因为准备 ...
- rocketmq 主机负载异常飙高问题的解决
最近在部署rocketmq到物理机时, 发现并解决了一个主机Load异常飙高的问题, 觉得有必要记录一下. 我们采用了rocketmq(https://github.com/alibaba/Rocke ...
- linux 进程guanl管理的常用几个命令
执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的时候,每个进程会被动态得分配系统资源.内存.安全属性和与之相关的状态.可以有多个进程关联到同一个程序,并同时执行不会互相干扰.操作系统 ...
- UVAlive4080_Warfare And Logistics
给一个无向图,求出两个值,所有点到所有其他点的最短距离和,任意删除一条边后的这个值. 数据规模是100点1000边. 白书例题,不多说了直接对于每个点求出最短路树,对于每条边,如果它不是最短路树上的边 ...
- BZOJ5125 小Q的书架（决策单调性+动态规划+分治+树状数组）
设f[i][j]为前i个划成j段的最小代价,枚举上个划分点转移.容易想到这个dp有决策单调性,感性证明一下比较显然.如果用单调栈维护决策就不太能快速的求出逆序对个数了,改为使用分治,移动端点时树状数组 ...