0.7.0 圣诞快乐

ximan · Dec 25, 2015 · 33d0b01 · 33d0b01
1 parent 9a489e7
commit 33d0b01
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 73 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -1,3 +1,8 @@
+### 0.7.0(151225)
+
+* 增加默认判断内容过少自动加载下方内容
+* 优化`lock()`，默认智能判断，如加参数`lock('up')`锁定上方，如加参数`lock('down')`锁定下方
+
 ### 0.6.0(151218)
 
 * 增加参数threshold提前加载距离

diff --git a/Intro.md b/Intro.md
@@ -0,0 +1,27 @@
+### 0.7.0(151225)
+
+根据网友提议，默认内容过少时，自动触发加载下方内容，只会加载一次，如果内容还不够一屏，无法继续触发。并且修复`lock()`，增加参数可以手动锁定上方或者下方。
+
+### 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)。
+
+### 0.4.0(150927)
+
+根据网友提供demo，修改至适用大部分普通列表网页，终于可以大规模使用啦！
+
+### 0.3.0(150410)
+
+项目中通知列表有可编辑、删除等状态，需要锁定和解锁下拉刷新功能。
+
+### 0.2.0(150325)
+
+公司项目APP内嵌页需要下拉刷新，终于可以实战了！这一版大家可以开始使用和反馈。
+
+### 0.1.0(141024)
+
+虽然有**上拉加载更多**的需求，但一直都是用的scroll方法。写**dropload**完全是为了练习插件写法和touch的使用。
diff --git a/README.md b/README.md
@@ -4,29 +4,18 @@
 
 ## 背景介绍
 
-### 0.6.0(151218)
+根据网友提议，默认内容过少时，自动触发加载下方内容，只会加载一次，如果内容还不够一屏，无法继续触发。并且修复`lock()`，增加参数可以手动锁定上方或者下方。
 
-根据网友提议增加提前加载距离threshold，适用于上拉加载更多功能。默认显示到加载区高度2/3时加载。
+[历史背景介绍](Intro.md)
 
-### 0.5.0(151217)
-
-感谢交流群里网友各种吐槽上拉加载抖动。发现`touch`和`scroll`同时作用会发生抖动，干脆把上拉加载改为滑到底部自动加载。如依旧需要上拉加载效果，可以下载[releases0.4.0版本](https://github.com/ximan/dropload/releases/tag/0.4.0)。
-
-### 0.4.0(150927)
-
-根据网友提供demo，修改至适用大部分普通列表网页，终于可以大规模使用啦！
-
-### 0.3.0(150410)
-
-项目中通知列表有可编辑、删除等状态，需要锁定和解锁下拉刷新功能。
-
-### 0.2.0(150325)
+## 最新版本
 
-公司项目APP内嵌页需要下拉刷新，终于可以实战了！这一版大家可以开始使用和反馈。
+### 0.7.0(151225)
 
-### 0.1.0(141024)
+* 增加默认判断内容过少自动加载下方内容
+* 优化`lock()`，默认智能判断，如加参数`lock('up')`锁定上方，如加参数`lock('down')`锁定下方
 
-虽然有**上拉加载更多**的需求，但一直都是用的scroll方法。写**dropload**完全是为了练习插件写法和touch的使用。
+[所有更新日志](Changelog.md)
 
 ## 示例
 
@@ -93,17 +82,17 @@ $('.element').dropload({
 
 `lock()` 锁定dropload
 
+|      参数      |             说明            |
+|----------------|----------------------------|
+| `lock()`       | 智能锁定，锁定上一次加载的方向 |
+| `lock('up')`   | 锁定上方                    |
+| `lock('down')` | 锁定下方                    |
+
 `unlock()` 解锁dropload
 
 `noData()` 无数据
 
-## 最新版本
-
-### 0.6.0(151218)
-
-* 增加参数threshold提前加载距离
-
-[所有更新日志](Changelog.md)
+`resetload()` 重置。每次数据加载完，必须重置
 
 ## dropload使用交流群
 

diff --git a/dist/dropload.js b/dist/dropload.js
@@ -1,7 +1,7 @@
 /**
  * dropload
  * 西门
- * 0.6.0(151218)
+ * 0.7.0(151225)
  */
 
 ;(function($){
@@ -21,7 +21,8 @@
         // loading状态
         me.loading = false;
         // 是否锁定
-        me.isLock = false;
+        me.isLockUp = false;
+        me.isLockDown = false;
         // 是否有数据
         me.isData = true;
         me._scrollTop = 0;
@@ -70,6 +71,11 @@
             me._scrollWindowHeight = me.$element.height();
         }
 
+        // 如果文档高度不大于窗口高度，数据较少，自动加载下方数据
+        if(me._scrollContentHeight <= me._scrollWindowHeight){
+            fnLoadDown();
+        }
+
         // 窗口调整
         $win.on('resize',function(){
             if(me.opts.scrollArea == win){
@@ -82,19 +88,19 @@
 
         // 绑定触摸
         me.$element.on('touchstart',function(e){
-            if(!me.loading && !me.isLock){
+            if(!me.loading){
                 fnTouches(e);
                 fnTouchstart(e, me);
             }
         });
         me.$element.on('touchmove',function(e){
-            if(!me.loading && !me.isLock){
+            if(!me.loading){
                 fnTouches(e, me);
                 fnTouchmove(e, me);
             }
         });
         me.$element.on('touchend',function(){
-            if(!me.loading && !me.isLock){
+            if(!me.loading){
                 fnTouchend(me);
             }
         });
@@ -109,13 +115,18 @@
                 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;
-                me.opts.loadDownFn(me);
+            if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
+                fnLoadDown();
             }
         });
+
+        // 加载下方方法
+        function fnLoadDown(){
+            me.direction = 'up';
+            me.$domDown.html(me.opts.domDown.domLoad);
+            me.loading = true;
+            me.opts.loadDownFn(me);
+        }
     };
 
     // touches
@@ -146,7 +157,7 @@
         var _absMoveY = Math.abs(me._moveY);
 
         // 加载上方
-        if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down'){
+        if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
             e.preventDefault();
 
             me.$domUp = $('.'+me.opts.domUp.domClass);
@@ -179,7 +190,7 @@
     // touchend
     function fnTouchend(me){
         var _absMoveY = Math.abs(me._moveY);
-        if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down'){
+        if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
             fnTransition(me.$domUp,300);
 
             if(_absMoveY > me.opts.distance){
@@ -207,15 +218,35 @@
     }
 
     // 锁定
-    MyDropLoad.prototype.lock = function(){
+    MyDropLoad.prototype.lock = function(direction){
         var me = this;
-        me.isLock = true;
+        // 如果不指定方向
+        if(direction === undefined){
+            // 如果操作方向向上
+            if(me.direction == 'up'){
+                me.isLockDown = true;
+            // 如果操作方向向下
+            }else if(me.direction == 'down'){
+                me.isLockUp = true;
+            }else{
+                me.isLockUp = true;
+                me.isLockDown = true;
+            }
+        // 如果指定锁上方
+        }else if(direction == 'up'){
+            me.isLockUp = true;
+        // 如果指定锁下方
+        }else if(direction == 'down'){
+            me.isLockDown = true;
+        }
     };
 
     // 解锁
     MyDropLoad.prototype.unlock = function(){
         var me = this;
-        me.isLock = false;
+        // 简单粗暴解锁
+        me.isLockUp = false;
+        me.isLockDown = false;
     };
 
     // 无数据
@@ -228,7 +259,7 @@
     MyDropLoad.prototype.resetload = function(){
         var me = this;
         if(me.direction == 'down' && me.upInsertDOM){
-            me.$domUp.css({'height':'0'}).on('webkitTransitionEnd transitionend',function(){
+            me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
                 me.loading = false;
                 me.upInsertDOM = false;
                 $(this).remove();

diff --git a/dist/dropload.min.js b/dist/dropload.min.js
diff --git a/examples/load-bottom.html b/examples/load-bottom.html
@@ -130,36 +130,6 @@ <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
             <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
             <span class="date">2014-14-14</span>
         </a>
-        <a class="item" href="#">
-            <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
-            <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
-            <span class="date">2014-14-14</span>
-        </a>
-        <a class="item" href="#">
-            <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
-            <h3>8文字描述文字描述文字描述文字描述文字描述</h3>
-            <span class="date">2014-14-14</span>
-        </a>
-        <a class="item" href="#">
-            <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
-            <h3>9文字描述文字描述文字描述文字描述文字描述</h3>
-            <span class="date">2014-14-14</span>
-        </a>
-        <a class="item" href="#">
-            <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
-            <h3>10文字描述文字描述文字描述文字描述文字描述</h3>
-            <span class="date">2014-14-14</span>
-        </a>
-        <a class="item" href="#">
-            <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
-            <h3>11文字描述文字描述文字描述文字描述文字描述</h3>
-            <span class="date">2014-14-14</span>
-        </a>
-        <a class="item" href="#">
-            <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
-            <h3>12文字描述文字描述文字描述文字描述文字描述</h3>
-            <span class="date">2014-14-14</span>
-        </a>
     </div>
 </div>
 <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->