为什么80%的码农都做不了架构师？>>>
<!DOCTYPE html><html><head lang = "en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><title>关 于</title><link type="text/css" rel="stylesheet" href="../../style/public.css"><link type="text/css" rel="stylesheet" href="../../style/style.css"> </head><body><div id="wrapper"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div><ul id="thelist"><li><img src="img/page1_img1.jpg" /></li><li><img src="img/page1_img2.jpg" /></li><li><img src="img/page1_img3.jpg" /></li><li><img src="img/page1_img1.jpg" /></li><li><img src="img/page1_img2.jpg" /></li><li><img src="img/page1_img3.jpg" /></li></ul><div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span></div></div></div><script src="iscroll.js"></script><script>/*** 下拉刷新 （自定义实现此方法）* myScroll.refresh(); // 数据加载完成后，调用界面更新方法*/function pullDownAction() {setTimeout(function () {var el, li, i;el = document.getElementById('thelist');//==========================================li = document.createElement('li');// li.innerText = 'Generated row ' + (++generatedCount);li.innerHTML = '<img src="' + '/style/images/loading.gif' + '"/>';el.insertBefore(li, el.childNodes[0]);/*$.ajax({type: "GET",url: "LoadMore.ashx",data: { page: generatedCount },dataType: "json",success: function (data) {var json = data;$(json).each(function () {li = document.createElement('li');// li.innerText = 'Generated row ' + (++generatedCount);li.innerHTML = '<img src="' + this.src + '"/>';el.insertBefore(li, el.childNodes[0]);})}});*/myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)}, 3000); // <-- Simulate network congestion, remove setTimeout from production!}function pullUpAction() {setTimeout(function () {var el, li, i;el = document.getElementById('thelist');//==========================================li = document.createElement('li');// li.innerText = 'Generated row ' + (++generatedCount);li.innerHTML = '<img src="' + '/style/images/icon!.gif' + '"/>';el.insertBefore(li, el.childNodes[0]);//============================================myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)}, 1000); // <-- Simulate network congestion, remove setTimeout from production!}/*** 初始化iScroll控件*/function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp');pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll('wrapper', {scrollbarClass: 'myScrollbar', /* 重要样式 */useTransition: false,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 = '下拉刷新...';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 = '上拉加载更多...';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?)}}});setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}//初始化绑定iScroll控件document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', loaded, false);</script></body></html>
![下拉加载 实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果](https://700zi.400zi.cn/uploadfile/img/14/809/0580c9db933df651bbab24da2b79d60d.jpg)
