IScroll5实现下拉刷新上拉加载更
2016-08-17 11:53
253 查看
声明：虽然本文章为原创，但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下，具体原来的demo可以参考：点击打开链接
实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）
外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jquery简化一下开发
以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来
<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>
html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示<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>
</body>
js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmove事件，scrollEnd事件也类似touchend事件，在滚动结束后执行<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>
如有出错，欢迎指正 PS：测试环境在firefox的响应式开发环境下运行
实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）
外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jquery简化一下开发
以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来
<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>
html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示<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>
</body>
js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmove事件，scrollEnd事件也类似touchend事件，在滚动结束后执行<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>
如有出错，欢迎指正 PS：测试环境在firefox的响应式开发环境下运行
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IScroll5实现下拉刷新上拉加载的功能实例
- 仿新浪微博实现ListBox下拉刷新和到底部自动加载
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
- 使用开源库 SVPullToRefresh 实现上拉加载下拉刷新
- Android 下拉刷新 上拉加载更多框架实现
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
- 《ListBox》———何如实现ListBox下拉刷新和到底部自动加载
- 采用github上的开源项目Android-PullToRefresh实现ListView的下拉刷新和上拉加载
- 使用开源库 SVPullToRefresh 实现上拉加载下拉刷新
- ListView下拉刷新上拉加载更多实现
- 推荐大家一个好用的实现分页加载和下拉刷新Android工具包
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
- 使用PullToRefresh实现下拉刷新和上拉加载
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
- android ListView上拉加载更多 下拉刷新功能实现（采用pull-to-refresh）
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
- Android UI--自定义ListView(实现下拉刷新+加载更多）
- Android实现微博下拉刷新上拉加载更多功能
- 使用PullToRefresh实现下拉刷新和上拉加载
- ListView实现下拉刷新和上拉加载更多时遇到的诸多问题与解析