iscroll动态加载数据完美解决方法

iscroll动态加载数据完美解决方法

本文实例为大家分享了iscroll动态加载数据的具体代码，供大家参考，具体内容如下

加载中...

上拉加载...

js.

// iScroll 滚动条/上拉刷新/下拉加载

var myScroll,

pullDownEl,

pullDownOffset,

pullUpEl,

pullUpOffset;

function loaded() {

pullDownEl = document.getElementById('pullDown');

pullDownOffset = pullDownEl.offsetHeight;

pullUpEl = document.getElementById('pullUp');

pullUpOffset = pullUpEl.offsetHeight;

myScroll = new iScroll('wrapper', {

useTransition: false,

topOffset: pullDownOffset,

btnOffset: pullUpOffset,

hideScrollbar: true,

fadeScrollbar: true,

onRefresh: function () {

if (pullDownEl.className.match('loading')) {

pullDownEl.className = '';

//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';

pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间：' + updateDatetime;

} else if (pullUpEl.className.match('loading')) {

pullUpEl.className = '';

pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载...';

}

},http://

onScrollMove: function () {

if (this.y > 5 && !pullDownEl.className.match('flip')) {

pullDownEl.className = 'flip';

//pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新...';

pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间：' + updateDatetime;

this.minScrollY = 0;

} else if (this.y < 5 && pullDownEl.className.match('flip')) {

pullDownEl.className = '';

//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';

pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间：' + updateDatetime;

this.minScrollY = -pullDownOffset;

} else if (this.y < (this.maxScrollY - pullUpOffset - 40) && !pullUpEl.className.match('flip')) {

pullUpEl.className = 'flip';

pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载...';

this.maxScrollY = this.maxScrollY - pullUpOffset;

}

//else if (this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {

// pullUpEl.className = '';

// pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载...';

// //this.maxScrollY = pullUpOffset;

//}

},

onScrollEnd: function () {

if (pullDownEl.className.match('flip')) {

pullDownEl.className = 'loading';

//pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据刷新中...';

pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间：' + updateDatetime;

myScroll.refresh();

} else if (pullUpEl.className.match('flip')) {

pullUpEl.className = 'loading';

pullUpEl.querySelector('.pullUpLabel').innerHTML = '数据加载中...';

setTimeout(function () { myScroll.refresh(); }, 3000);

}

}

});

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

css

/* iScroll */

#wrapper{width:100%; position:absolute; top:0; bottom:0; z-index:1; overflow:hidden;}

#scroller{

width:100%; position:absolute; z-index:1;

-webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0);

}

#pullDown,

#pullUp{padding:15px 0 15px 60px; font-size:14px; line-height:27px; color:#303030;}

#pullDown{background:url(../images/loadBottom.png) no-repeat 30px center; background-size:27px 27px;}

#pullUp{background:url(../images/loadTop.png) no-repeat 30px center; background-size:27px 27px;}

#pullDown.flip{background:url(../images/loadTop.png) no-repeat 30px center; background-size:27px 27px;}

#pullUp.flip{background:url(../images/loadBottom.png) no-repeat 30px center; background-size:27px 27px;}

#pullDown.loading,

#pullUp.loading{background:url(../images/loading.gif) no-repeat 30px center; background-size:25px 27px;}

/* iScroll end */

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