IScroll5实现下拉刷新上拉加载的功能实例
程序员文章站
2022-05-14 19:19:44
声明：虽然本文章为原创，但是很大部分参考了博客园博主mrxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下。
实现效果：类似网易新闻加载新闻列表（...
声明：虽然本文章为原创，但是很大部分参考了博客园博主mrxia的一篇iscroll的下拉刷新的实现方式，我个人把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的响应式开发环境下运行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Vue.js仿微信聊天窗口展示组件功能
下一篇： jQuery:unbind方法的使用详解