iscroll实现移动端下拉刷新，上拉加载更多
js菜鸡-------自我记录
html页面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <title>iscroll-测试</title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="css/cm.css" rel="stylesheet" type="text/css"> </head> <style> span{display:block;width:100%;text-align:center;} </style> <body> <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新</span> </div> <!--信息列表--> <ul id="thelist"> <div class="cm-v2 no-border"> <section class="doc-box"> <ul class="doctorUlList" id="doctorUlListAuto"> <!--此处展示具体信息 --> </ul> </section> </div> </ul> <div id="pullUp"> <span class="pullUpIcon"></span><span class="pullUpLabel" >查看更多</span> </div> </div> </div> <div id="footer"></div> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" src="js/getList-iscroll.js"></script> <script type="text/javascript"> var currentPage = 1; Ajax(currentPage); 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: true, topOffset: pullDownOffset, onRefresh: function () { if (pullDownEl.className.match('loading')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...'; } else if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...'; } }, onScrollMove: function () { if (this.y > 5 && !pullDownEl.className.match('flip')) { pullDownEl.className = 'flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...'; this.minScrollY = 0; } else if (this.y < 5 && pullDownEl.className.match('flip')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...'; this.minScrollY = -pullDownOffset; } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'refresh...'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...'; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullDownEl.className.match('flip')) { pullDownEl.className = 'loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; pullDownAction(); } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; pullUpAction(); } } }); setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800); } function pullDownAction () { window.location.reload(); } function pullUpAction () { var page = currentPage++; Ajax(page); myScroll.refresh(); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); </script> </body> </html>
ajax请求后台数据：
/** * Created by jstarseven on 2016/3/7. */ function Ajax(page) { $.ajax({ type: "post", dataType: "JSON", url: "http://xx.xxxxxx.com/wx_service/getList", data: {'page': page}, success: function (data) { var item = ''; $.each(data, function (i, result) { var skill = result['skill']; item += '<li>'; item += '<a href="getDoctorDetail.html?doctorId=' + result['doctorId'] + '">'; item += '<div class="doc-pic"><img id="headPicUrl" src="' + result['headPicUrl'] + '" alt=""></div>'; item += '<div class="doc-info">'; item += '<h4><span>' + result['doctorName'] + '</span> <span>' + result['doctorTitle'] + '</span></h4>'; item += '<p class="c-666">' + result['hospitalName'] + '</p>'; item += '<p class="shanchang" id="skillBegin">'; $.each(skill, function (i) { item += '<span>' + skill[i] + '</span>'; }) item += '</p>'; item += '<div class="feiyong">'; item += '<span class="s1">¥ <span>' + result['consultPrice'] + '</span>/次</span>'; item += '<span class="s2"><span>' + result['payNumber'] + '</span>人付款，<span>' + result['praisePercent'] + '</span> 好评</span>'; item += '</div>'; item += '</div>'; item += '</a>'; item += '</li>'; }); $('.doctorUlList').append(item); }, error: function () { console.log("当前请求失败"); } }); }
-END-
