CSS样式：
*{list-style: none;} li{background: blueviolet;} .dropload-up,.dropload-down{ position: relative; height: 0; overflow: hidden; font-size: 12px; /* 开启硬件加速 */ -webkit-transform:translateZ(0); transform:translateZ(0); } .dropload-down{ height: 50px; } .dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{ height: 50px; line-height: 50px; text-align: center; } .dropload-load .loading{ display: inline-block; height: 15px; width: 15px; border-radius: 100%; margin: 6px; border: 2px solid #666; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rotate 0.75s linear infinite; animation: rotate 0.75s linear infinite; } /*加载动画*/ @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
HTML：
<div class="mui-container content"> <ul class="lists" style=""> </ul> </div>
Javascript:
/** * 定义全局变量 */ var G_WEBBASE = "https://tsch.fromfuture.cn:7712/"; var page; //从第几页开始显示 var size; //每页显示几条数据 var usrid;//患者guid $(function() { //入参 var page = 0; //页码 var size = 10; //每页显示条数 usrid = "25C60166D8475D16E050AE0AC684EC8A"; //患者guid // dropload var dropload = $('.content').dropload({ domDown: { domClass: 'dropload-down', domRefresh: '<div class="dropload-refresh"style="font-weight: 700;color: #777;font-size: 15px;">↑上拉加载更多</div>', domLoad: '<div class="dropload-load" style="font-weight: 700;color: #777;font-size: 15px;"><span class="loading"></span>加载中...</div>', domNoData: '<div class="dropload-noData"style="font-weight: 700;color: #777;font-size: 15px;">暂无数据</div>' }, domUp : { domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh"style="font-weight: 700;color: #777;font-size: 15px;">↓下拉过程显示内容-下拉刷新-自定义内容</div>', domUpdate : '<div class="dropload-update"style="font-weight: 700;color: #777;font-size: 15px;">↓下拉刷新内容</div>', domLoad : '<div class="dropload-load"style="font-weight: 700;color: #777;font-size: 15px;"><span class="loading"></span>正在刷新</div>' }, distance: 10, threshold: "", scrollArea: window, loadDownFn: function(me) { page++;//分页 $.ajax({ type: 'GET', url: G_WEBBASE+'GZ/v1/usrApp/queryMyOrder?usrid=' + usrid + '&pageNo=' + page + '&pageSize=' + size, //async: false, timeout: 8000, success: function(data) { data = data.trim(); data = data.replace(/ /g, ''); data = JSON.parse(data) var data = data.data; if(data.parameterType.length > 0) { var result = ''; for(var i = 0; i < data.parameterType.length; i++) { //DOM取数据库数据 var imgurl = " https://tsch.fromfuture.cn/ftp/"; var orderstate = data.parameterType[i].orderstate;//支付状态code result += '<li>'; result += '<div>'; result += '<p style="border-bottom: 1px solid #ccc;position: relative;padding-top: 5px;padding-left: 12px;">'; result += '<img src="'+imgurl + data.parameterType[i].ftpurl+'" alt="" style="40px;height: 40px;border-radius:23px;" id="docimg"/>'; result += '<span style="position: absolute;top: 14px;left: 66px;">'+data.parameterType[i].docname+'</span>'; result += '<span style="position: absolute;top: 14px;right: 18px;color:red;">'+data.parameterType[i].orderstatename+'</span>'; result += '</p>'; result += '</div>'; result += '<div id="data' + i + '" data-guid="'+data.parameterType[i].orderid+'" class="indent"></div>'; result += '<p style="padding-left: 15px;">'; result += '<span style="color:#ADB6D9;font-size: 15px;" id="mingc">创建时间:</span> '; result += '<span style="font-size:16px;color:#ADB6D9" id="time">2017-08-30</span>'; result += '</p>'; result += '<p style="padding-left: 15px;">'; result += '<span style="font-size:15px;color:#ADB6D9">订单编号:</span> '; result += '<span style="font-size:13px;color:#ADB6D9;">'+data.parameterType[i].ordercode+'</span>'; result += '</p>'; result += '<p style="padding-left: 15px;">'; result += '<span style="font-size:15px;color:#ADB6D9">咨询方式:</span> '; result += '<span style="font-size:16px;color:#ADB6D9">'+data.parameterType[i].consultationmethodname+'</span>'; result += '<img src="images/going.png" alt="" style="margin: 0px 20px;float: right;20px;height:20px"/>'; result += '</p>'; result += '<p style="padding-left: 15px;"><span style="font-size:15px;color:#ADB6D9">订单金额:</span> '; result += '<span style="color:red;font-size:16px;">'+data.parameterType[i].orderamount+'</span>'; result += '<span style="color:red;font-size:16px;">元</span>'; result += '</p>'; result += '<div style="height: 45px;border-top: 1px solid #ccc;">'; result += '<div style="margin-top:5px;overflow: hidden;">'; if(orderstate == '1'){ result+= '<button type="button" style="float: right;margin-right: 20px;">去支付</button>'; result+= '<button type="button" style="float: right;margin-right: 20px;">取消订单</button>'; }else if(orderstate == '2'){ result+= '<button type="button" style="float: right;margin-right: 20px;">去咨询</button>'; }else if(orderstate == '3'){ result+= '<button type="button" style="float: right;margin-right: 20px;">退款详情</button>'; }else if(orderstate == '4'){ result+= '<button type="button" style="float: right;margin-right: 20px;">删除订单</button>'; } result += '</div>'; result += '</div>'; result += '</li>'; } } else { tab1LoadEnd = true;// 数据加载完 me.lock();// 锁定 me.noData();// 无数据 } // 为了测试，延迟1秒加载 setTimeout(function() { $('.lists').append(result);// 插入数据到页面，放到最后面 me.resetload();// 每次数据插入，必须重置 }, 1000); }, error: function(xhr, type) { me.resetload();// 即使加载出错，也得重置 } }); } }); })
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/dropload.min.js"></script>：
/** * dropload * 西门(http://ons.me/526.html) * 0.9.0(160215) */ !function(a){"use strict";function g(a){a.touches||(a.touches=a.originalEvent.touches)}function h(a,b){b._startY=a.touches[0].pageY,b.touchScrollTop=b.$scrollArea.scrollTop()}function i(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c.touchScrollTop<=0&&"down"==c.direction&&!c.isLockUp&&(b.preventDefault(),c.$domUp=a("."+c.opts.domUp.domClass),c.upInsertDOM||(c.$element.prepend('<div class="'+c.opts.domUp.domClass+'"></div>'),c.upInsertDOM=!0),n(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domUp.html(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domUp.css({height:c._offsetY}))}function j(b){var c=Math.abs(b._moveY);""!=b.opts.loadUpFn&&b.touchScrollTop<=0&&"down"==b.direction&&!b.isLockUp&&(n(b.$domUp,300),c>b.opts.distance?(b.$domUp.css({height:b.$domUp.children().height()}),b.$domUp.html(b.opts.domUp.domLoad),b.loading=!0,b.opts.loadUpFn(b)):b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.upInsertDOM=!1,a(this).remove()}),b._moveY=0)}function k(a){a.opts.autoLoad&&a._scrollContentHeight-a._threshold<=a._scrollWindowHeight&&m(a)}function l(a){a._scrollContentHeight=a.opts.scrollArea==b?e.height():a.$element[0].scrollHeight}function m(a){a.direction="up",a.$domDown.html(a.opts.domDown.domLoad),a.loading=!0,a.opts.loadDownFn(a)}function n(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var f,b=window,c=document,d=a(b),e=a(c);a.fn.dropload=function(a){return new f(this,a)},f=function(a,b){var c=this;c.$element=a,c.upInsertDOM=!1,c.loading=!1,c.isLockUp=!1,c.isLockDown=!1,c.isData=!0,c._scrollTop=0,c._threshold=0,c.init(b)},f.prototype.init=function(f){var l=this;l.opts=a.extend(!0,{},{scrollArea:l.$element,domUp:{domClass:"dropload-up",domRefresh:'<div class="dropload-refresh">↓下拉刷新</div>',domUpdate:'<div class="dropload-update">↑释放更新</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加载中...</div>'},domDown:{domClass:"dropload-down",domRefresh:'<div class="dropload-refresh">↑上拉加载更多</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加载中...</div>',domNoData:'<div class="dropload-noData">暂无数据</div>'},autoLoad:!0,distance:50,threshold:"",loadUpFn:"",loadDownFn:""},f),""!=l.opts.loadDownFn&&(l.$element.append('<div class="'+l.opts.domDown.domClass+'">'+l.opts.domDown.domRefresh+"</div>"),l.$domDown=a("."+l.opts.domDown.domClass)),l._threshold=l.$domDown&&""===l.opts.threshold?Math.floor(1*l.$domDown.height()/3):l.opts.threshold,l.opts.scrollArea==b?(l.$scrollArea=d,l._scrollContentHeight=e.height(),l._scrollWindowHeight=c.documentElement.clientHeight):(l.$scrollArea=l.opts.scrollArea,l._scrollContentHeight=l.$element[0].scrollHeight,l._scrollWindowHeight=l.$element.height()),k(l),d.on("resize",function(){l._scrollWindowHeight=l.opts.scrollArea==b?b.innerHeight:l.$element.height()}),l.$element.on("touchstart",function(a){l.loading||(g(a),h(a,l))}),l.$element.on("touchmove",function(a){l.loading||(g(a,l),i(a,l))}),l.$element.on("touchend",function(){l.loading||j(l)}),l.$scrollArea.on("scroll",function(){l._scrollTop=l.$scrollArea.scrollTop(),""!=l.opts.loadDownFn&&!l.loading&&!l.isLockDown&&l._scrollContentHeight-l._threshold<=l._scrollWindowHeight+l._scrollTop&&m(l)})},f.prototype.lock=function(a){var b=this;void 0===a?"up"==b.direction?b.isLockDown=!0:"down"==b.direction?b.isLockUp=!0:(b.isLockUp=!0,b.isLockDown=!0):"up"==a?b.isLockUp=!0:"down"==a&&(b.isLockDown=!0,b.direction="up")},f.prototype.unlock=function(){var a=this;a.isLockUp=!1,a.isLockDown=!1,a.direction="up"},f.prototype.noData=function(a){var b=this;void 0===a||1==a?b.isData=!1:0==a&&(b.isData=!0)},f.prototype.resetload=function(){var b=this;"down"==b.direction&&b.upInsertDOM?b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.loading=!1,b.upInsertDOM=!1,a(this).remove(),l(b)}):"up"==b.direction&&(b.loading=!1,b.isData?(b.$domDown.html(b.opts.domDown.domRefresh),l(b),k(b)):b.$domDown.html(b.opts.domDown.domNoData))}}(window.Zepto||window.jQuery);