基于iScroll实现下拉刷新和上滑加载效果
程序员文章站
2023-02-24 10:30:14
本文实例为大家分享了iscroll下拉刷新上滑加载展示的具体代码，供大家参考，具体内容如下
html代码：
...
本文实例为大家分享了iscroll下拉刷新上滑加载展示的具体代码，供大家参考，具体内容如下
html代码：
<!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; maximum-scale=1.0;" /> <title>iscroll下拉刷新上滑加载</title> <link rel="stylesheet" href="style/main.css"/> </head> <body> <div class="header">header</div> <div id="wrapper"> <div id="scroller"> <div id="pulldown"> <span class="pulldownlabel">下拉刷新</span> </div> <ul id="thelist"> <!--<li>原始数据</li>--> </ul> <div id="pullup"> <span class="pulluplabel">上拉加载更多</span> </div> </div> </div> <div class="footer">footer</div> <script type="text/javascript" src="script/iscroll.js"></script> <script type="text/javascript" src="script/main.js"></script> </body> </html>
css代码：
body,ul,li {padding:0;margin:0;border:0}
body {font-size:12px;font-family:microsoft yahei}
.header {position:absolute;top:0; left:0;width:100%;height:45px;line-height:45px;font-size:16px;text-align:center;background:#e6e6e6}
.footer {position:absolute;bottom:0; left:0;width:100%;height:48px;line-height:48px;font-size:16px;text-align:center;background:#e6e6e6}
#wrapper {position:absolute;top:45px; bottom:48px;left:0;width:100%}
#scroller li {padding:0 10px;height:60px;line-height:60px;background:#ecf6ff;margin-top:10px}
#pulldown, #pullup {padding:0 10px;height:30px;line-height:30px;color:#888;text-align:center}
js代码：
var myscroll,pulldownel, pulldownoffset,pullupel, pullupoffset,generatedcount = 0;
function loaded() {
//动画部分
pulldownel = document.getelementbyid('pulldown');
pulldownoffset = pulldownel.offsetheight;
pullupel = document.getelementbyid('pullup');
pullupoffset = pullupel.offsetheight;
myscroll = new iscroll('wrapper', {
usetransition: true,
topoffset: pulldownoffset,
onrefresh: function () {
if (pulldownel.classname.match('loading')) {
pulldownel.classname = '';
pulldownel.queryselector('.pulldownlabel').innerhtml = '下拉刷新';
} else if (pullupel.classname.match('loading')) {
pullupel.classname = '';
pullupel.queryselector('.pulluplabel').innerhtml = '上拉加载更多';
}
},
onscrollmove: function () {
if (this.y > 5 && !pulldownel.classname.match('flip')) {
pulldownel.classname = 'flip';
pulldownel.queryselector('.pulldownlabel').innerhtml = '释放刷新';
this.minscrolly = 0;
} else if (this.y < 5 && pulldownel.classname.match('flip')) {
pulldownel.classname = '';
pulldownel.queryselector('.pulldownlabel').innerhtml = 'pull down to refresh...';
this.minscrolly = -pulldownoffset;
} else if (this.y < (this.maxscrolly - 5) && !pullupel.classname.match('flip')) {
pullupel.classname = 'flip';
pullupel.queryselector('.pulluplabel').innerhtml = '释放刷新';
this.maxscrolly = this.maxscrolly;
} else if (this.y > (this.maxscrolly + 5) && pullupel.classname.match('flip')) {
pullupel.classname = '';
pullupel.queryselector('.pulluplabel').innerhtml = 'pull up to load more...';
this.maxscrolly = pullupoffset;
}
},
onscrollend: function () {
if (pulldownel.classname.match('flip')) {
pulldownel.classname = 'loading';
pulldownel.queryselector('.pulldownlabel').innerhtml = '加载中';
pulldownaction(); // execute custom function (ajax call?)
} else if (pullupel.classname.match('flip')) {
pullupel.classname = 'loading';
pullupel.queryselector('.pulluplabel').innerhtml = '加载中';
pullupaction(); // execute custom function (ajax call?)
}
}
});
loadaction();
}
document.addeventlistener('touchmove', function (e) { e.preventdefault(); }, false);//阻止冒泡
document.addeventlistener('domcontentloaded', function () { settimeout(loaded, 0); }, false);
//初始状态，加载数据
function loadaction(){
var el, li;
el = document.getelementbyid('thelist');
for (i=0; i<10; i++) {
li = document.createelement('li');
li.innertext = '初始数据--' + (++generatedcount);
el.appendchild(li, el.childnodes[0]);
}
myscroll.refresh();
}
//下拉刷新当前数据
function pulldownaction () {
settimeout(function () {
//这里执行刷新操作
myscroll.refresh();
}, 400);
}
//上拉加载更多数据
function pullupaction () {
settimeout(function () {
var el, li;
el = document.getelementbyid('thelist');
for (i=0; i<10; i++) {
li = document.createelement('li');
li.innertext = '上拉加载--' + (++generatedcount);
el.appendchild(li, el.childnodes[0]);
}
myscroll.refresh();
}, 400);
}
示例：
demo地址：
下载地址：iscroll下拉刷新上滑加载
截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： js图片轮播插件的封装