From 9a489e747391d9dfb3f9dd245f871b4a91f49657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Fri, 18 Dec 2015 18:56:49 +0800 Subject: [PATCH] 0.6.0 --- Changelog.md | 6 +++++- README.md | 11 +++++++---- dist/dropload.js | 13 ++++++++++--- dist/dropload.min.js | 4 ++-- examples/load-top-bottom.html | 3 ++- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/Changelog.md b/Changelog.md index 343edf6..6eb0e65 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,8 +1,12 @@ +### 0.6.0(151218) + +* 增加参数threshold提前加载距离 + ### 0.5.0(151217) * 上拉加载改为滑到底部自动加载 * 删除上拉加载中的↑释放更新 -* 增加无数据`me.noData()` API +* 增加无数据`noData()` API ### 0.4.0(150927) diff --git a/README.md b/README.md index 9c03e25..c91913b 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ ## 背景介绍 +### 0.6.0(151218) + +根据网友提议增加提前加载距离threshold,适用于上拉加载更多功能。默认显示到加载区高度2/3时加载。 + ### 0.5.0(151217) 感谢交流群里网友各种吐槽上拉加载抖动。发现`touch`和`scroll`同时作用会发生抖动,干脆把上拉加载改为滑到底部自动加载。如依旧需要上拉加载效果,可以下载[releases0.4.0版本](https://github.com/ximan/dropload/releases/tag/0.4.0)。 @@ -79,6 +83,7 @@ $('.element').dropload({ | 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>',
domLoad : '<div class="dropload-load">○加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
} | 数组 | | distance | 拉动距离 | 50 | 数字 | +| threshold | 提前加载距离 | 加载区高度2/3 | 正整数 | | loadUpFn | 上方function | 空 | function(me){
//你的代码
me.resetload();
} | | loadDownFn | 下方function | 空 | function(me){
//你的代码
me.resetload();
} | @@ -94,11 +99,9 @@ $('.element').dropload({ ## 最新版本 -### 0.5.0(151217) +### 0.6.0(151218) -* 上拉加载改为滑到底部自动加载 -* 删除上拉加载中的↑释放更新 -* 增加无数据`me.noData()` API +* 增加参数threshold提前加载距离 [所有更新日志](Changelog.md) diff --git a/dist/dropload.js b/dist/dropload.js index d482b39..0ab333b 100644 --- a/dist/dropload.js +++ b/dist/dropload.js @@ -1,7 +1,7 @@ /** * dropload * 西门 - * 0.5.0(151217) + * 0.6.0(151218) */ ;(function($){ @@ -46,6 +46,7 @@ domNoData : '
暂无数据
' }, distance : 50, // 拉动距离 + threshold : '', // 提前加载距离 loadUpFn : '', // 上方function loadDownFn : '' // 下方function }, options); @@ -101,8 +102,14 @@ // 加载下方 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)){ + if(me.opts.threshold === ''){ + // 默认滑到加载区2/3处时加载 + me._threshold = Math.floor(me.$domDown.height()*1/3); + }else{ + me._threshold = me.opts.threshold; + } + + if(me.opts.loadDownFn != '' && !me.loading && !me.isLock && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){ me.direction = 'up'; me.$domDown.html(me.opts.domDown.domLoad); me.loading = true; diff --git a/dist/dropload.min.js b/dist/dropload.min.js index efc4c0e..c2cd9fb 100644 --- a/dist/dropload.min.js +++ b/dist/dropload.min.js @@ -1,6 +1,6 @@ /** * dropload * 西门 - * 0.5.0(151217) + * 0.6.0(151218) */ -!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 +!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,threshold:"",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._threshold=""===k.opts.threshold?Math.floor(1*k.$domDown.height()/3):k.opts.threshold,""!=k.opts.loadDownFn&&!k.loading&&!k.isLock&&k._scrollContentHeight-k._threshold<=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/load-top-bottom.html b/examples/load-top-bottom.html index d86bc02..10f9b8d 100644 --- a/examples/load-top-bottom.html +++ b/examples/load-top-bottom.html @@ -296,7 +296,8 @@

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

me.resetload(); } }); - } + }, + threshold : 50 }); });