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

2019-11-19 16:03:10

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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地址：http://test.ixiewei.com/iscroll-4-demo

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

截图：