修改加载底部DEMO的ajax部分，更接近于实际开发效果

ximan · Dec 2, 2016 · fb88558 · fb88558
1 parent cc4f953
commit fb88558
Showing 1 changed file with 26 additions and 22 deletions.
diff --git a/examples/load-bottom.html b/examples/load-bottom.html
@@ -33,6 +33,8 @@
         font-weight: normal;
     }
     .content{
+        max-width: 640px;
+        margin: 0 auto;
         background-color: #fff;
     }
     .content .item{
@@ -110,43 +112,45 @@ <h1>就当我是新闻页吧</h1>
 <script src="../dist/dropload.min.js"></script>
 <script>
 $(function(){
-    var counter = 0;
-    // 每页展示4个
-    var num = 4;
+    // 页数
+    var page = 0;
+    // 每页展示5个
+    var size = 5;
     var pageStart = 0,pageEnd = 0;
 
     // dropload
     $('.content').dropload({
         scrollArea : window,
         loadDownFn : function(me){
+            page++;
+            // 拼接HTML
+            var result = '';
             $.ajax({
                 type: 'GET',
-                url: 'json/more.json',
+                url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                 dataType: 'json',
                 success: function(data){
-                    var result = '';
-                    counter++;
-                    pageEnd = num * counter;
-                    pageStart = pageEnd - num;
-
-                    for(var i = pageStart; i < pageEnd; i++){
-                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
-                                        +'<img src="'+data.lists[i].pic+'" alt="">'
-                                        +'<h3>'+data.lists[i].title+'</h3>'
-                                        +'<span class="date">'+data.lists[i].date+'</span>'
-                                    +'</a>';
-                        if((i + 1) >= data.lists.length){
-                            // 锁定
-                            me.lock();
-                            // 无数据
-                            me.noData();
-                            break;
+                    var arrLen = data.length;
+                    if(arrLen > 0){
+                        for(var i=0; i<arrLen; i++){
+                            result +=   '<a class="item opacity" href="'+data[i].link+'">'
+                                            +'<img src="'+data[i].pic+'" alt="">'
+                                            +'<h3>'+data[i].title+'</h3>'
+                                            +'<span class="date">'+data[i].date+'</span>'
+                                        +'</a>';
                         }
+                    // 如果没有数据
+                    }else{
+                        // 锁定
+                        me.lock();
+                        // 无数据
+                        me.noData();
                     }
                     // 为了测试，延迟1秒加载
                     setTimeout(function(){
+                        // 插入数据到页面，放到最后面
                         $('.lists').append(result);
-                        // 每次数据加载完，必须重置
+                        // 每次数据插入，必须重置
                         me.resetload();
                     },1000);
                 },