基于iScroll实现下拉刷新和上滑加载效果

基于iScroll实现下拉刷新和上滑加载效果

本文实例为大家分享了iScroll下拉刷新上滑加载展示的具体代码，供大家参考，具体内容如下

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('lihttp://');

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地址：http://test.ixiewei.com/iscroll-4-demo

下载地址：iScroll下拉刷新上滑加载

截图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。