iscroll动态加载数据完美解决方法
程序员文章站
2022-05-26 08:22:31
本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下
本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下
<div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pulldown"> <span class="pulldownlabel" style="text-align: center;">加载中...</span> </div> <div class="sps_itembox "> <div class="list_show"> <ul id="ullist"></ul> </div> </div> <div id="pullup"> <span class="pulluplabel" style="text-align: center;">上拉加载...</span> </div> </div> </div>
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 = '上拉加载...'; } }, 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 */
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。