0.4.0 中秋快乐

ximan · Sep 27, 2015 · 799ae19 · 799ae19
1 parent ae1a192
commit 799ae19
Show file tree

Hide file tree

Showing 10 changed files with 495 additions and 218 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -1,3 +1,8 @@
+### 0.4.0(150927)
+
+* 增加参数scrollArea
+* 修复未滑动到底部就加载bug
+
 ### 0.3.0(150410)
 
 * 增加`lock()` 和`unlock()` API

diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@
 
 ## 背景介绍
 
+### 0.4.0(150927)
+
+根据网友提供demo，修改至适用大部分普通列表网页，终于可以大规模使用啦！
+
 ### 0.3.0(150410)
 
 项目中通知列表有可编辑、删除等状态，需要锁定和解锁下拉刷新功能。
@@ -18,33 +22,26 @@
 
 ## 示例
 
+![扫一扫](examples/news-list.png)
+[普通列表DEMO](http://ximan.github.io/dropload/examples/news-list.html)
+
 ![扫一扫](examples/product-list.png)
-[DEMO链接](http://ximan.github.io/dropload/examples/product-list.html)
+[固定布局DEMO](http://ximan.github.io/dropload/examples/product-list.html)
 
 ## 依赖
 
 Zepto 或者 jQuery
 
 ## 使用方法
 
+引用css和js
+
+    <link rel="stylesheet" href="../dist/dropload.min.css">
+    <script src="../dist/dropload.min.js"></script>
+
 ````
 $('.element').dropload({
-    loadUpFn : function(me){
-        $.ajax({
-            type: 'GET',
-            url: 'json/update.json',
-            dataType: 'json',
-            success: function(data){
-                alert(data);
-                // 代码执行后必须重置
-                me.resetload();
-            },
-            error: function(xhr, type){
-                alert('Ajax error!');
-                me.resetload();
-            }
-        });
-    },
+    scrollArea : window,
     loadDownFn : function(me){
         $.ajax({
             type: 'GET',
@@ -64,12 +61,13 @@ $('.element').dropload({
 });
 ````
 
-CSS样式请自行美化
+进阶用法详见上面[固定布局DEMO](http://ximan.github.io/dropload/examples/product-list.html)
 
 ## 参数列表
 
 |    参数     |     说明     |  默认值 |      可填值     |
 |------------|-------------|--------|----------------|
+| scrollArea | 滑动区域      | 绑定元素自身 | window |
 | domUp      | 上方DOM      | {<br/>domClass : 'dropload-up',<br/>domRefresh : '&lt;div class="dropload-refresh"&gt;↓下拉刷新&lt;/div&gt;',<br/>domUpdate  : '&lt;div class="dropload-update"&gt;↑释放更新&lt;/div&gt;',<br/>domLoad : '&lt;div class="dropload-load"&gt;○加载中...&lt;/div&gt;'<br/>} | 数组 |
 | domDown    | 下方DOM      | {<br/>domClass : 'dropload-down',<br/>domRefresh : '&lt;div class="dropload-refresh"&gt;↑上拉加载更多&lt;/div&gt;',<br/>domUpdate  : '&lt;div class="dropload-update"&gt;↓释放加载&lt;/div&gt;',<br/>domLoad : '&lt;div class="dropload-load"&gt;○加载中...&lt;/div&gt;'<br/>}  | 数组 |
 | distance   | 拉动距离      | 50 | 数字 |
@@ -86,9 +84,9 @@ CSS样式请自行美化
 
 ## 最新版本
 
-### 0.3.0(150410)
+### 0.4.0(150927)
 
-* 增加`lock()` 和`unlock()` API
-* 修复拉动加载时还可拉动bug
+* 增加参数scrollArea
+* 修复未滑动到底部就加载bug
 
 [所有更新日志](Changelog.md)
diff --git a/dist/dropload.css b/dist/dropload.css
@@ -0,0 +1,56 @@
+.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 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);
+    }
+}
diff --git a/dist/dropload.js b/dist/dropload.js
@@ -1,11 +1,13 @@
 /**
  * dropload
  * 西门
- * 0.3.0(150410)
+ * 0.4.0(150927)
  */
 
 ;(function($){
     'use strict';
+    var $win = $(window);
+    var $doc = $(document);
     $.fn.dropload = function(options){
         return new MyDropLoad(this, options);
     };
@@ -22,23 +24,31 @@
     MyDropLoad.prototype.init = function(options){
         var me = this;
         me.opts = $.extend({}, {
+            scrollArea : me.$element,                                            // 滑动区域
             domUp : {                                                            // 上方DOM
                 domClass   : 'dropload-up',
                 domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
                 domUpdate  : '<div class="dropload-update">↑释放更新</div>',
-                domLoad    : '<div class="dropload-load">○加载中...</div>'
+                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
             },
             domDown : {                                                          // 下方DOM
                 domClass   : 'dropload-down',
                 domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                 domUpdate  : '<div class="dropload-update">↓释放加载</div>',
-                domLoad    : '<div class="dropload-load">○加载中...</div>'
+                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
             },
             distance : 50,                                                       // 拉动距离
             loadUpFn : '',                                                       // 上方function
             loadDownFn : ''                                                      // 下方function
         }, options);
 
+        // 判断滚动区域
+        if(me.opts.scrollArea == window){
+            me.$scrollArea = $win;
+        }else{
+            me.$scrollArea = me.opts.scrollArea;
+        }
+
         // 绑定触摸
         me.$element.on('touchstart',function(e){
             if(!me.loading && !me.isLock){
@@ -69,9 +79,15 @@
     // touchstart
     function fnTouchstart(e, me){
         me._startY = e.touches[0].pageY;
-        me._loadHeight = me.$element.height();
-        me._childrenHeight = me.$element.children().height();
-        me._scrollTop = me.$element.scrollTop();
+        // 判断滚动区域
+        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();
     }
 
     // touchmove
@@ -101,6 +117,7 @@
             // 下拉
             if(_absMoveY <= me.opts.distance){
                 me._offsetY = _absMoveY;
+                // 待解决：move时会不断清空、增加dom，有可能影响性能，下同
                 me.$domUp.html('').append(me.opts.domUp.domRefresh);
             // 指定距离 < 下拉距离 < 指定距离*2
             }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
@@ -115,7 +132,7 @@
         }
 
         // 加载下方
-        if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._loadHeight+me._scrollTop) && me.direction == 'up'){
+        if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._meHeight+me._scrollTop) && me.direction == 'up'){
             e.preventDefault();
             if(!me.insertDOM){
                 me.$element.append('<div class="'+me.opts.domDown.domClass+'"></div>');
@@ -139,7 +156,7 @@
             }
 
             me.$domDown.css({'height': me._offsetY});
-            me.$element.scrollTop(me._offsetY+me._scrollTop);
+            me.$scrollArea.scrollTop(me._offsetY+me._scrollTop);
         }
     }
 

diff --git a/dist/dropload.min.css b/dist/dropload.min.css
diff --git a/dist/dropload.min.js b/dist/dropload.min.js