From 91b4e20cfd2172029d60b5fa6926fd2ff1ac2c3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Thu, 17 Dec 2015 17:54:44 +0800 Subject: [PATCH] 0.5.0 --- Changelog.md | 6 + README.md | 33 +- dist/dropload.css | 21 +- dist/dropload.js | 173 +++++----- dist/dropload.min.css | 1 - dist/dropload.min.js | 4 +- examples/json/more.json | 54 +++- examples/{news-list.html => load-bottom.html} | 137 ++++---- examples/load-bottom.png | Bin 0 -> 1662 bytes examples/load-top-bottom.html | 304 ++++++++++++++++++ examples/load-top-bottom.png | Bin 0 -> 1869 bytes examples/news-list.png | Bin 729 -> 0 bytes examples/product-list.html | 176 +++++----- 13 files changed, 638 insertions(+), 271 deletions(-) delete mode 100644 dist/dropload.min.css rename examples/{news-list.html => load-bottom.html} (71%) create mode 100644 examples/load-bottom.png create mode 100644 examples/load-top-bottom.html create mode 100644 examples/load-top-bottom.png delete mode 100644 examples/news-list.png diff --git a/Changelog.md b/Changelog.md index f470db3..343edf6 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,9 @@ +### 0.5.0(151217) + +* 上拉加载改为滑到底部自动加载 +* 删除上拉加载中的↑释放更新 +* 增加无数据`me.noData()` API + ### 0.4.0(150927) * 增加参数scrollArea diff --git a/README.md b/README.md index cd93eca..20ce1ea 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ ## 背景介绍 +### 0.5.0(151217) + +感谢交流群里网友各种吐槽上拉加载抖动。发现`touch`和`scroll`同时作用会发生抖动，干脆把上拉加载改为滑到底部自动加载。如依旧需要上拉加载效果，可以下载[releases0.4.0版本](https://github.com/ximan/dropload/releases/tag/0.4.0)。 + ### 0.4.0(150927) 根据网友提供demo，修改至适用大部分普通列表网页，终于可以大规模使用啦！ @@ -22,21 +26,24 @@ ## 示例 -![扫一扫](examples/news-list.png) -[普通列表DEMO](http://ximan.github.io/dropload/examples/news-list.html) +![扫一扫](examples/load-bottom.png) +[DEMO1，加载底部](http://ximan.github.io/dropload/examples/load-bottom.html) + +![扫一扫](examples/load-top-bottom.png) +[DEMO2，加载顶部、底部](http://ximan.github.io/dropload/examples/load-top-bottom.html) ![扫一扫](examples/product-list.png) -[固定布局DEMO](http://ximan.github.io/dropload/examples/product-list.html) +[DEMO3，固定布局，加载顶部、底部](http://ximan.github.io/dropload/examples/product-list.html) ## 依赖 -Zepto 或者 jQuery +Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用） ## 使用方法 引用css和js - + ```` @@ -49,11 +56,12 @@ $('.element').dropload({ dataType: 'json', success: function(data){ alert(data); - // 代码执行后必须重置 + // 每次数据加载完，必须重置 me.resetload(); }, error: function(xhr, type){ alert('Ajax error!'); + // 即使加载出错，也得重置 me.resetload(); } }); @@ -61,7 +69,7 @@ $('.element').dropload({ }); ```` -进阶用法详见上面[固定布局DEMO](http://ximan.github.io/dropload/examples/product-list.html) +进阶用法详见上面[DEMO3，固定布局，加载顶部、底部](http://ximan.github.io/dropload/examples/product-list.html) ## 参数列表 @@ -69,7 +77,7 @@ $('.element').dropload({ |------------|-------------|--------|----------------| | scrollArea | 滑动区域 | 绑定元素自身 | window | | domUp | 上方DOM | {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
} | 数组 | -| domDown | 下方DOM | {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domUpdate : '<div class="dropload-update">↓释放加载</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
} | 数组 | +| domDown | 下方DOM | {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load">○加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
} | 数组 | | distance | 拉动距离 | 50 | 数字 | | loadUpFn | 上方function | 空 | function(me){
//你的代码
me.resetload();
} | | loadDownFn | 下方function | 空 | function(me){
//你的代码
me.resetload();
} | @@ -82,12 +90,15 @@ $('.element').dropload({ `unlock()` 解锁dropload +`noData()` 无数据 + ## 最新版本 -### 0.4.0(150927) +### 0.5.0(151217) -* 增加参数scrollArea -* 修复未滑动到底部就加载bug +* 上拉加载改为滑到底部自动加载 +* 删除上拉加载中的↑释放更新 +* 增加无数据`me.noData()` API [所有更新日志](Changelog.md) diff --git a/dist/dropload.css b/dist/dropload.css index 9ea3158..5956f5c 100644 --- a/dist/dropload.css +++ b/dist/dropload.css @@ -2,23 +2,18 @@ position: relative; height: 0; overflow: hidden; - -webkit-transform:translate3d(0,0,0); - transform:translate3d(0,0,0); + font-size: 12px; + /* 开启硬件加速 */ + -webkit-transform:translateZ(0); + transform:translateZ(0); } -.dropload-refresh,.dropload-update,.dropload-load{ - position: absolute; - left: 50%; - bottom: 0; - width: 100%; +.dropload-down{ + height: 50px; +} +.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{ height: 50px; line-height: 50px; text-align: center; - -webkit-transform:translate(-50%,0); - transform:translate(-50%,0); -} -.dropload-down .dropload-refresh,.dropload-down .dropload-update,.dropload-down .dropload-load{ - top: 0; - bottom: auto; } .dropload-load .loading{ display: inline-block; diff --git a/dist/dropload.js b/dist/dropload.js index bfab085..d482b39 100644 --- a/dist/dropload.js +++ b/dist/dropload.js @@ -1,22 +1,30 @@ /** * dropload * 西门 - * 0.4.0(150927) + * 0.5.0(151217) */ ;(function($){ 'use strict'; - var $win = $(window); - var $doc = $(document); + var win = window; + var doc = document; + var $win = $(win); + var $doc = $(doc); $.fn.dropload = function(options){ return new MyDropLoad(this, options); }; var MyDropLoad = function(element, options){ var me = this; me.$element = $(element); - me.insertDOM = false; + // 上方是否插入DOM + me.upInsertDOM = false; + // loading状态 me.loading = false; + // 是否锁定 me.isLock = false; + // 是否有数据 + me.isData = true; + me._scrollTop = 0; me.init(options); }; @@ -34,21 +42,43 @@ domDown : { // 下方DOM domClass : 'dropload-down', domRefresh : '
↑上拉加载更多
', - domUpdate : '
↓释放加载
', - domLoad : '
加载中...
' + domLoad : '
加载中...
', + domNoData : '
暂无数据
' }, distance : 50, // 拉动距离 loadUpFn : '', // 上方function loadDownFn : '' // 下方function }, options); + // 如果加载下方，事先在下方插入DOM + if(me.opts.loadDownFn != ''){ + me.$element.append('
'+me.opts.domDown.domRefresh+'
'); + me.$domDown = $('.'+me.opts.domDown.domClass); + } + // 判断滚动区域 - if(me.opts.scrollArea == window){ + if(me.opts.scrollArea == win){ me.$scrollArea = $win; + // 获取文档高度 + me._scrollContentHeight = $doc.height(); + // 获取win显示区高度 —— 这里有坑 + me._scrollWindowHeight = doc.documentElement.clientHeight; }else{ me.$scrollArea = me.opts.scrollArea; + me._scrollContentHeight = me.$element[0].scrollHeight; + me._scrollWindowHeight = me.$element.height(); } + // 窗口调整 + $win.on('resize',function(){ + if(me.opts.scrollArea == win){ + // 重新获取win显示区高度 + me._scrollWindowHeight = win.innerHeight; + }else{ + me._scrollWindowHeight = me.$element.height(); + } + }); + // 绑定触摸 me.$element.on('touchstart',function(e){ if(!me.loading && !me.isLock){ @@ -67,6 +97,18 @@ fnTouchend(me); } }); + + // 加载下方 + me.$scrollArea.on('scroll',function(){ + me._scrollTop = me.$scrollArea.scrollTop(); + // 当滑到加载区2/3处时加载 + if(me.opts.loadDownFn != '' && !me.loading && !me.isLock && (me._scrollContentHeight - Math.floor(me.$domDown.height()*1/3)) <= (me._scrollWindowHeight + me._scrollTop)){ + me.direction = 'up'; + me.$domDown.html(me.opts.domDown.domLoad); + me.loading = true; + me.opts.loadDownFn(me); + } + }); }; // touches @@ -79,15 +121,8 @@ // touchstart function fnTouchstart(e, me){ me._startY = e.touches[0].pageY; - // 判断滚动区域 - if(me.opts.scrollArea == window){ - me._meHeight = $win.height(); - me._childrenHeight = $doc.height(); - }else{ - me._meHeight = me.$element.height(); - me._childrenHeight = me.$element.children().height(); - } - me._scrollTop = me.$scrollArea.scrollTop(); + // 记住触摸时的scrolltop值 + me.touchScrollTop = me.$scrollArea.scrollTop(); } // touchmove @@ -104,25 +139,27 @@ var _absMoveY = Math.abs(me._moveY); // 加载上方 - if(me.opts.loadUpFn != '' && me._scrollTop <= 0 && me.direction == 'down'){ + if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down'){ e.preventDefault(); - if(!me.insertDOM){ - me.$element.prepend('
'); - me.insertDOM = true; - } me.$domUp = $('.'+me.opts.domUp.domClass); + // 如果加载区没有DOM + if(!me.upInsertDOM){ + me.$element.prepend('
'); + me.upInsertDOM = true; + } + fnTransition(me.$domUp,0); // 下拉 if(_absMoveY <= me.opts.distance){ me._offsetY = _absMoveY; - // 待解决：move时会不断清空、增加dom，有可能影响性能，下同 - me.$domUp.html('').append(me.opts.domUp.domRefresh); + // todo：move时会不断清空、增加dom，有可能影响性能，下同 + me.$domUp.html(me.opts.domUp.domRefresh); // 指定距离 < 下拉距离 < 指定距离*2 }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){ me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5; - me.$domUp.html('').append(me.opts.domUp.domUpdate); + me.$domUp.html(me.opts.domUp.domUpdate); // 下拉距离 > 指定距离*2 }else{ me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2; @@ -130,57 +167,22 @@ me.$domUp.css({'height': me._offsetY}); } - - // 加载下方 - if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._meHeight+me._scrollTop) && me.direction == 'up'){ - e.preventDefault(); - if(!me.insertDOM){ - me.$element.append('
'); - me.insertDOM = true; - } - - me.$domDown = $('.'+me.opts.domDown.domClass); - fnTransition(me.$domDown,0); - - // 上拉 - if(_absMoveY <= me.opts.distance){ - me._offsetY = _absMoveY; - me.$domDown.html('').append(me.opts.domDown.domRefresh); - // 指定距离 < 上拉距离 < 指定距离*2 - }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){ - me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5; - me.$domDown.html('').append(me.opts.domDown.domUpdate); - // 上拉距离 > 指定距离*2 - }else{ - me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2; - } - - me.$domDown.css({'height': me._offsetY}); - me.$scrollArea.scrollTop(me._offsetY+me._scrollTop); - } } // touchend function fnTouchend(me){ var _absMoveY = Math.abs(me._moveY); - if(me.insertDOM){ - if(me.direction == 'down'){ - me.$domResult = me.$domUp; - me.domLoad = me.opts.domUp.domLoad; - }else if(me.direction == 'up'){ - me.$domResult = me.$domDown; - me.domLoad = me.opts.domDown.domLoad; - } - - fnTransition(me.$domResult,300); + if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down'){ + fnTransition(me.$domUp,300); if(_absMoveY > me.opts.distance){ - me.$domResult.css({'height':me.$domResult.children().height()}); - me.$domResult.html('').append(me.domLoad); - fnCallback(me); + me.$domUp.css({'height':me.$domUp.children().height()}); + me.$domUp.html(me.opts.domUp.domLoad); + me.loading = true; + me.opts.loadUpFn(me); }else{ - me.$domResult.css({'height':'0'}).on('webkitTransitionEnd',function(){ - me.insertDOM = false; + me.$domUp.css({'height':'0'}).on('webkitTransitionEnd transitionend',function(){ + me.upInsertDOM = false; $(this).remove(); }); } @@ -188,13 +190,12 @@ } } - // 回调 - function fnCallback(me){ - me.loading = true; - if(me.opts.loadUpFn != '' && me.direction == 'down'){ - me.opts.loadUpFn(me); - }else if(me.opts.loadDownFn != '' && me.direction == 'up'){ - me.opts.loadDownFn(me); + // 重新获取文档高度 + function fnRecoverContentHeight(me){ + if(me.opts.scrollArea == win){ + me._scrollContentHeight = $doc.height(); + }else{ + me._scrollContentHeight = me.$element[0].scrollHeight; } } @@ -210,15 +211,33 @@ me.isLock = false; }; + // 无数据 + MyDropLoad.prototype.noData = function(){ + var me = this; + me.isData = false; + }; + // 重置 MyDropLoad.prototype.resetload = function(){ var me = this; - if(!!me.$domResult){ - me.$domResult.css({'height':'0'}).on('webkitTransitionEnd',function(){ + if(me.direction == 'down' && me.upInsertDOM){ + me.$domUp.css({'height':'0'}).on('webkitTransitionEnd transitionend',function(){ me.loading = false; - me.insertDOM = false; + me.upInsertDOM = false; $(this).remove(); + fnRecoverContentHeight(me); }); + }else if(me.direction == 'up'){ + me.loading = false; + // 如果有数据 + if(me.isData){ + // 加载区修改样式 + me.$domDown.html(me.opts.domDown.domRefresh); + fnRecoverContentHeight(me); + }else{ + // 如果没数据 + me.$domDown.html(me.opts.domDown.domNoData); + } } }; diff --git a/dist/dropload.min.css b/dist/dropload.min.css deleted file mode 100644 index 9e03306..0000000 --- a/dist/dropload.min.css +++ /dev/null @@ -1 +0,0 @@ -.dropload-up,.dropload-down{position:relative;height:0;overflow:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.dropload-refresh,.dropload-update,.dropload-load{position:absolute;left:50%;bottom:0;width:100%;height:50px;line-height:50px;text-align:center;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.dropload-down .dropload-refresh,.dropload-down .dropload-update,.dropload-down .dropload-load{top:0;bottom:auto}.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 .75s linear infinite;animation:rotate .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)}} \ No newline at end of file diff --git a/dist/dropload.min.js b/dist/dropload.min.js index a4211ba..efc4c0e 100644 --- a/dist/dropload.min.js +++ b/dist/dropload.min.js @@ -1,6 +1,6 @@ /** * dropload * 西门 - * 0.4.0(150927) + * 0.5.0(151217) */ -!function(a){"use strict";function e(a){a.touches||(a.touches=a.originalEvent.touches)}function f(a,d){d._startY=a.touches[0].pageY,d.opts.scrollArea==window?(d._meHeight=b.height(),d._childrenHeight=c.height()):(d._meHeight=d.$element.height(),d._childrenHeight=d.$element.children().height()),d._scrollTop=d.$scrollArea.scrollTop()}function g(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._scrollTop<=0&&"down"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.prepend('
'),c.insertDOM=!0),c.$domUp=a("."+c.opts.domUp.domClass),j(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html("").append(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("").append(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})),""!=c.opts.loadDownFn&&c._childrenHeight<=c._meHeight+c._scrollTop&&"up"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.append('
'),c.insertDOM=!0),c.$domDown=a("."+c.opts.domDown.domClass),j(c.$domDown,0),d<=c.opts.distance?(c._offsetY=d,c.$domDown.html("").append(c.opts.domDown.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domDown.html("").append(c.opts.domDown.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domDown.css({height:c._offsetY}),c.$scrollArea.scrollTop(c._offsetY+c._scrollTop))}function h(b){var c=Math.abs(b._moveY);b.insertDOM&&("down"==b.direction?(b.$domResult=b.$domUp,b.domLoad=b.opts.domUp.domLoad):"up"==b.direction&&(b.$domResult=b.$domDown,b.domLoad=b.opts.domDown.domLoad),j(b.$domResult,300),c>b.opts.distance?(b.$domResult.css({height:b.$domResult.children().height()}),b.$domResult.html("").append(b.domLoad),i(b)):b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.insertDOM=!1,a(this).remove()}),b._moveY=0)}function i(a){a.loading=!0,""!=a.opts.loadUpFn&&"down"==a.direction?a.opts.loadUpFn(a):""!=a.opts.loadDownFn&&"up"==a.direction&&a.opts.loadDownFn(a)}function j(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var d,b=a(window),c=a(document);a.fn.dropload=function(a){return new d(this,a)},d=function(b,c){var d=this;d.$element=a(b),d.insertDOM=!1,d.loading=!1,d.isLock=!1,d.init(c)},d.prototype.init=function(c){var d=this;d.opts=a.extend({},{scrollArea:d.$element,domUp:{domClass:"dropload-up",domRefresh:'
↓下拉刷新
',domUpdate:'
↑释放更新
',domLoad:'
加载中...
'},domDown:{domClass:"dropload-down",domRefresh:'
↑上拉加载更多
',domUpdate:'
↓释放加载
',domLoad:'
加载中...
'},distance:50,loadUpFn:"",loadDownFn:""},c),d.$scrollArea=d.opts.scrollArea==window?b:d.opts.scrollArea,d.$element.on("touchstart",function(a){d.loading||d.isLock||(e(a),f(a,d))}),d.$element.on("touchmove",function(a){d.loading||d.isLock||(e(a,d),g(a,d))}),d.$element.on("touchend",function(){d.loading||d.isLock||h(d)})},d.prototype.lock=function(){var a=this;a.isLock=!0},d.prototype.unlock=function(){var a=this;a.isLock=!1},d.prototype.resetload=function(){var b=this;b.$domResult&&b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.loading=!1,b.insertDOM=!1,a(this).remove()})}}(window.Zepto||window.jQuery); \ No newline at end of file +!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&&(b.preventDefault(),c.$domUp=a("."+c.opts.domUp.domClass),c.upInsertDOM||(c.$element.prepend('
'),c.upInsertDOM=!0),l(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&&(l(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 transitionend",function(){b.upInsertDOM=!1,a(this).remove()}),b._moveY=0)}function k(a){a._scrollContentHeight=a.opts.scrollArea==b?e.height():a.$element[0].scrollHeight}function l(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(b,c){var d=this;d.$element=a(b),d.upInsertDOM=!1,d.loading=!1,d.isLock=!1,d.isData=!0,d._scrollTop=0,d.init(c)},f.prototype.init=function(f){var k=this;k.opts=a.extend({},{scrollArea:k.$element,domUp:{domClass:"dropload-up",domRefresh:'
↓下拉刷新
',domUpdate:'
↑释放更新
',domLoad:'
加载中...
'},domDown:{domClass:"dropload-down",domRefresh:'
↑上拉加载更多
',domLoad:'
加载中...
',domNoData:'
暂无数据
'},distance:50,loadUpFn:"",loadDownFn:""},f),""!=k.opts.loadDownFn&&(k.$element.append('
'+k.opts.domDown.domRefresh+"
"),k.$domDown=a("."+k.opts.domDown.domClass)),k.opts.scrollArea==b?(k.$scrollArea=d,k._scrollContentHeight=e.height(),k._scrollWindowHeight=c.documentElement.clientHeight):(k.$scrollArea=k.opts.scrollArea,k._scrollContentHeight=k.$element[0].scrollHeight,k._scrollWindowHeight=k.$element.height()),d.on("resize",function(){k._scrollWindowHeight=k.opts.scrollArea==b?b.innerHeight:k.$element.height()}),k.$element.on("touchstart",function(a){k.loading||k.isLock||(g(a),h(a,k))}),k.$element.on("touchmove",function(a){k.loading||k.isLock||(g(a,k),i(a,k))}),k.$element.on("touchend",function(){k.loading||k.isLock||j(k)}),k.$scrollArea.on("scroll",function(){k._scrollTop=k.$scrollArea.scrollTop(),""!=k.opts.loadDownFn&&!k.loading&&!k.isLock&&k._scrollContentHeight-Math.floor(1*k.$domDown.height()/3)<=k._scrollWindowHeight+k._scrollTop&&(k.direction="up",k.$domDown.html(k.opts.domDown.domLoad),k.loading=!0,k.opts.loadDownFn(k))})},f.prototype.lock=function(){var a=this;a.isLock=!0},f.prototype.unlock=function(){var a=this;a.isLock=!1},f.prototype.noData=function(){var a=this;a.isData=!1},f.prototype.resetload=function(){var b=this;"down"==b.direction&&b.upInsertDOM?b.$domUp.css({height:"0"}).on("webkitTransitionEnd transitionend",function(){b.loading=!1,b.upInsertDOM=!1,a(this).remove(),k(b)}):"up"==b.direction&&(b.loading=!1,b.isData?(b.$domDown.html(b.opts.domDown.domRefresh),k(b)):b.$domDown.html(b.opts.domDown.domNoData))}}(window.Zepto||window.jQuery); \ No newline at end of file diff --git a/examples/json/more.json b/examples/json/more.json index 2da1bfd..ee08b46 100644 --- a/examples/json/more.json +++ b/examples/json/more.json @@ -1,22 +1,64 @@ { "lists":[ + { + "title":"Apple 苹果 iPhone 6s Plus (A1699) 16G 玫瑰金色 移动联通电信4G 全网通手机", + "pic":"http://d8.yihaodianimg.com/N05/M03/D4/1E/CgQI0lYEBwWAQIvJAAFyostaOYY12501_80x80.jpg", + "link":"#1", + "date":"2015-12-01" + }, + { + "title":"Letv 乐视1S 乐1S 移动联通双4G 双卡双待 16GB 金", + "pic":"http://d9.yihaodianimg.com/N07/M00/6B/E6/CgQIz1ZNQWeALuYuAASH8T5MJzY38001_80x80.jpg", + "link":"#2", + "date":"2015-12-02" + }, + { + "title":"NOKIA/诺基亚 2610 nokia 2610 经典诺基亚直板手机 学生备用老人手机 诺基亚低端功能机", + "pic":"http://d8.yihaodianimg.com/N08/M0A/6B/E1/ChEi1lZhlgSAEES9AAIPUw3996808600_80x80.jpg", + "link":"#3", + "date":"2015-12-03" + }, + { + "title":"华为 Mate8 NXT-TL00 3GB+32GB版 移动定制 月光银", + "pic":"http://d6.yihaodianimg.com/N09/M00/78/AA/ChEi2VZpRZCAeyz-AAP2yE5HMTQ17001_80x80.jpg", + "link":"#4", + "date":"2015-12-04" + }, + { + "title":"锤子 坚果 32GB 红色 移动联通4G手机 双卡双待", + "pic":"http://d6.yihaodianimg.com/N07/M01/98/48/CgQI0FY3GNuAeKARAARTi1sTc0E99401_80x80.jpg", + "link":"#5", + "date":"2015-12-05" + }, + { + "title":"华为荣耀7i ATH-AL00 3G内存增强版 移动联通电信4G 沙滩金 双卡双待", + "pic":"http://d9.yihaodianimg.com/N05/M0A/B6/5A/CgQI0lX45JWANx7NAANWUytnWfY51201_80x80.jpg", + "link":"#6", + "date":"2015-12-06" + }, + { + "title":"小米 红米2A 增强版 白色 16G 移动4G手机 官网版 双卡双待", + "pic":"http://d6.yihaodianimg.com/N08/M08/94/33/ChEi1FX_oHWAWJYUAAL4rKvikTE54401_80x80.jpg", + "link":"#7", + "date":"2015-12-07" + }, { "title":"Samsung 三星 Galaxy Note4 N9108V 移动4G手机 幻影白", "pic":"http://d8.yihaodianimg.com/N06/M06/8A/B9/CgQIzVQj87GAZ2-bAAMyoIZt8v863301_80x80.jpg", - "link":"#1", - "date":"2015-02-02" + "link":"#8", + "date":"2015-12-08" }, { "title":"HTC Desire 826T 魔幻蓝 移动4G手机 双卡双待", "pic":"http://d8.yihaodianimg.com/N06/M04/DC/24/ChEbu1T4HVeASjwEAAGHikpYgyQ10901_80x80.jpg", - "link":"#2", - "date":"2015-01-03" + "link":"#9", + "date":"2015-12-09" }, { "title":"华为 荣耀畅玩4X Che2-UL00 联通标配版4G手机 双卡双待双通 白色", "pic":"http://d8.yihaodianimg.com/N05/M05/BE/72/ChEbulTYbhyAY_DmAAGmsWjdGgY32601_80x80.jpg", - "link":"#3", - "date":"2015-02-02" + "link":"#10", + "date":"2015-12-10" } ] } \ No newline at end of file diff --git a/examples/news-list.html b/examples/load-bottom.html similarity index 71% rename from examples/news-list.html rename to examples/load-bottom.html index 6717125..5cfdbc8 100644 --- a/examples/news-list.html +++ b/examples/load-bottom.html @@ -2,7 +2,7 @@ - 下拉刷新 + 加载底部 - +

就当我是新闻页吧

-
+
@@ -198,44 +162,59 @@

12文字描述文字描述文字描述文字描述文字描述
-
- 菜单一 - 菜单二 - 菜单三 - 菜单四 -
+ diff --git a/examples/load-bottom.png b/examples/load-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..f9c1b47fa7bd4c4cce7fb8e7e586912aef3ee292 GIT binary patch literal 1662 zcmYk7dsLEl7{}GTWtp6LGHu@4>8MlNsZlnMyk1hLc7aL_uTz`p5fuva0_LT(tynv2 zxpazx7Ru59NriEXtd*%pNGUZDFXasl(FvlGb70cpJ?DMjf1dYwzR&mhJiqtmX=sS0 z#a;^o0|U#j(4e!L_e z;&PRbuN1^9d16nsyYMt?V|lt(J(9`BCMcXi=H|vmMpujd7bu~8bnY2%jO6YEClkV} z<&?$P)x~>j+d@=@;f+F)*;RjkXAsEz_>q@z*a|dyl^Sa|%)v^mr%=9^niXAAL%xUz z09)Cdok6WQ1@lk)*4ZIXcUQA$j;bk6Rq6z=^-JQu;>FnK{L+rBTP>fY?8bx3Mo(I4 z#b`fA+!l=nGnwO+jfQL?%e$M!+1;BQ|Josui(YFX>*Q!UKKpy2%D;c2?=A8Y-y58_ zRLMv^j2e;83njD!Ea--@v5}!x`^q^IAM;{L3RHQe8lu{kj=HPVY29e$mIdvzBV00E zbc%u##{q*!Rtcznu!L9Klvy(p60H-ZG0TZ~-FHC@5*!(HZU?<5fF$bn^N_DfOVTufoTB&hsdTKLp6&L)WDeSH zI{6SAvjA1vHBd3{Zv7;y-0tvwUsCa=v$rzUOXUZWsMUpn9ty@?1{rr2^;GtkWm6ot ztkRA-cunGEHbxzi+o;5`BM})kVsgbnzoay#eozZW{>^zBcZ_-cQRmYvgx$ijXQ}8! zHb*z)fb`&T>*WLhC~G^v)ZB{@qW~w;tRk^lFA0*^laFmkt*6NBnrp7neePrOo#l$F zUU>Dsgx(S@3Y&P&>UzyMTm}w0YPIpO5%R3F zC4>Rgjm-2P$7*}~j4wu!%V)LE_ z>0AS(ZbinB893yDHdnwFud$l;M&x19Bs`5dHF@PW)CUel?NNwk^khepU^XwyOx{nO zl$?S^#SCSy0kn@BE^_^y>l@*Qt7*tR5t>l|-fP@~*^GJ_PNuGLTpZBNtUj~IYn>E{ zAPeVaT9-JC22)#CA=;Y<+zEt?TW!~!JB!hOm3mc_o*Sx)GvY`UwbK*6UGcecFqb#l zqVs4ANJa(Tm;Q2aOlpiqR>yLl7|J1qkf2UMOt3Ikflsj7KVEt|jyYkM%KEAzSZDJ@@;bIGrb z*gw_xR(3&vvb+1aFUsDD)=v2hENVAAZCX(th6mTts;TkpHnN`FAI^~A65!%MK?AO{ zy_=uL7YU}4AmZ3#I%2heM3VTE`-hQ9KG7hQjS8>M&6Ha*Fm7c9^s!F^b9>_q8>BIR z%(uCiyYL{NFGy#DtC(gk9zw-Y8vdT%+~M}`w&&`vOOc|mp6+H + + + + 加载顶部、底部 + + + + +
+

就当我是新闻页吧

+
+
+
+ + +

1文字描述文字描述

+ 2014-14-14 + + + +

2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

3文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

4文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

5文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

6文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

7文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

8文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

9文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

10文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

11文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

12文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + +
+
+
+ 测试菜单 + 只做展示 + 无功能 + 不用点 +
+ + + + + + \ No newline at end of file diff --git a/examples/load-top-bottom.png b/examples/load-top-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..9a2682891c0a2f920ad56b0c736447bd8854dd17 GIT binary patch literal 1869 zcmY+FdsLEl7{|?H^HMgg$ebfRSzf44F&B!csZ*?ugBU3^$l<6@EZ>LL$Kf5zn}_4q+1S``JrWgxCD*FQM!$Rkb6Nju)^}!e$~5#> z@>k@nKn@-o>a*jMK|`_f(m6^Il}Z&CGfbkQbuW``ZA*&7Uuu@AdV`@Y3w)QxkuA4q zeuAghD^1c31E!`L8q&;R2rFswX~O)%f@Lh4Wv#*GQf5C{FrtGVL|Ff8I@e#lJk>0+q4NN zX*ql^K#^!y5+3g5;^MFaVSgOY6~3-v_T+=g z?GRJ%<8RzUs>4#6F>c=0tF6?r7wMQfX|sAR$G}_90G9`n_!DD~YtJ=QY+@UrrPga% z=IDk$-h;(laLnrRo( z#lg052`#$R zn?1D;WUdm93%RZE*JhHb0ch6s>I9cxakPn$P|G*GSb{bYu;+qYYYnIx3Z*M79~|@*8HsdY-X@y!GFUJ5TW?=W~(HnlUo{EgW%F5_s1BAE#;uoU3 zod1y|^$z+_|E;9+GERRA>jY6z9;x5G%1V$p=f8dw)nQ-r#l%?Ig-fj5t!EJjS##AJ z;%kRgp+L8d8zh~o0w3PY(gXh}Aq}a)8S#(>?NxJF-c%&uB#WjvK388Eoy~?Jm_yHV z(lLXWg}%dbM_Yt(dxX{cmhrxK#-MeTx1EKsW4ymdTX5RnzHMvFX99N)dbQ)lvz$W7 zqXdxV00gy(Kjf7gDW5$SV8jZw1?~}EtB|~XV~sP5ve(%$e@(`DwzH0R(&?oXylNh` z*xo<&KMlox^TChKHn6UETnqm)zK}bF{cytn8tl_iu3_gxz~g%}tLF-)ei7W`XH1|Z z$_F&JDscI(n4*Lh!AR;rC=A%Q-+g15jh84Ba0*hgd=aCmN;MdHG%eANwp z!v~1UvR^GmiFhka2wAs9-iYv7Ag#g0B^X>r{ijaJg*QPkgA_w*}0C0Z!?>-eI zrnfL^D5R0MH=MxpdJI~`6w%!QeQr*E!=Y(L(ILxuq06MLH_0^mn{FO4r5<*Azqdow zO72+0&TUU!b)~v+3VT71@rCmWdXsuig23n^*JNNJtD4%WKN@0(TX2M2HK>mR?t6}p zcSY3cG8YB)%H1zjDRw1?SF(;GjX)J@!~u7Q-;7hIrxB>@c%!-5$ZgHf2sqV~h9t~a z&&mNP8x`kkpF$b=axI;$T>hJOl^F(yQfFkuLwSIGtbz4I+j1k_aVpkBNV$IHWV|bB zTV?{5={eixxweqoA4iN6nZ3`Rpe2t`0fdgPttoo+s#txdRS|b++n)RT|6R%VUsTc3 z$3gKA(sHqxo`0M{?fY;(sAy@7bGtZTX)XUl@-}5>cvCNU-1yp5sW9r=J}plAZ;n;@ z&I;*!`9X2B*xj!NdTDIfcNK3xCSccM`m`eRT_N>oN{YW5e%Wu-=NHi*nANhIdKi!B5P)01A z?Q|bpHZ$-=8e>2I4Uy61nYoVHF9%WTm?#vAc$V$RL{zCO)Un$;=Fdzt5cSQ;!nr2- z+3cpS)R;>eyc{qkaQU)^+8>^J_WM7O)Rkvs5V(c;9&$xtJcy@=XcK(!CqB0m(OdfP z%LWq%?>-TQHzgVnyqc7G8s&)DSb`d1E&-q7Z6AKpqH& zq&V4;It2LKPvZKO99+|{o*vD~bgFBV%v!zUTp)a;xE)yz*mn4e`iAPF;g3>l>rH*t`cbA4+fYOmvgTSOaS#!pL;x$?k-xFg7S2NNaPU{sQX&t^m_tSYg~Ja5JA z!RrULCaSlCo`a-#ajYHVSBdu%8aJ-=0ap;778Y`~ZzBQ$=p%;%QpqJS!2`tFa z8*YOXGgMVV2h#&q1PvR(FHa~B0l`;>52`4>DM7TuPbZ8jH1)n6A-JC~bt23>A7>9) zwT{{mj3)373_@|cbU<3)+7dKHI%QW;Mmk7+wn+=$TN9lRX3Twf@uVHhVc(k9sB5F+Zjdj9@@X@T` z1KH9I89 z<;6CgU95;i;he=N#iGLzz5RdCj9fmKR;hylHdm}QKT5ox{QLC{E4 - 下拉刷新 + 固定布局，加载顶部、底部 - +

头部

锁定 +
+ + +
@@ -203,92 +207,100 @@

12文字描述文字描述文字描述文字描述文字描述

+