实现每一种功能都有各种各样的方法和思路,今天总结我的一个小小的加载功能。

加载很常见,每一位手机控都对她再熟不过了。每次我们在刷微博、朋友圈、空间······,滑到一定的量时,会提醒上滑加载更多,这是一种加载方式;还有一种就是点击加载,点击加载一定的量,再点击,再加载一定的量(说了一大堆废话)。

现在我们就来说说ajax逐个加载数据,类似这样的数据列表。

html5 ajax加载界面 ajax实现点击加载更多_加载

先是显示10个,然后点击加载更多,再显示10个·····

html5 ajax加载界面 ajax实现点击加载更多_ci_02

 

 

一、思路

一般使用ajax加载的话,一下会加载全部数据,这次要控制量的加载,那就要用到判断,判断加载到10个停止加载,后面通过点击按钮,在接着加载完的10个后面继续加载。

要想控制只加载10个怎么办捏。不能通过遍历的 i 来判断 10个,因为加载完10个后后面还要加载,这样下一个10个就不好判断了,所以需要定义一个新的变量,来计算加载的个数,

可以这样写:

var ci = 0;
for(var i = 0; i < data.list.length; i++){

                              ci++; 

                              if(ci> 10){
                                  break;
                              }

                        }

然后需要再加载10个,再调用这个方法,所以这个方法需要声明一个函数名,下次需要用的时候在调用,如果需要传参也可以。现在还有个问题,第一次进来加载完10个后,需要再加载前10个数据接着后面的json数据,怎么办呢???

没关系,可以通过调用上面定义好的函数,然后传参。参数怎么计算呢???

先想一个参数和什么有关系,和 i 有关系,i 和什么有关系呢?或者说什么可以影响 i 呢?

好像只有它的值才会影响(那不是废话吗),这样的话它的值就不能是一个不变的数了,只能是一个变量,那么变量从哪里来呢???

别忘了我们还有一个点击事件,先定义一个 点击次数 的变量  var clickNum = 0,因为每次加载时10个,所以 i 的值应该为:

i = 10*clickNum,这是每次加载第一个数据的索引值。这样我们就解决了上面那个问题。

此时还有问题要解决,当数据全部点击加载完后,点击按钮需要隐藏,那怎么计算数据加载完了呢???

我们可以通过    点击的次数clickNum  来计算,因为每次加载10个,所以可以计算出一共需要加载的次数  parseInt((data.list.length)/10)+1,为什么加载的次数要加 1 呢?

因为parseInt()是取整,比如21/10=2,但实际需要加载 3 次,所以要加 1 ,巧的是我们第一次加载不用点击,浏览器已加载进来就读取了10个数据,

所以clickNum = parseInt((data.list.length)/10),当clickNum == parseInt((data.list.length)/10) 时隐藏点击按钮。

思路基本清晰了

 

二、实现功能

HTML:
<dl id="incomeNum">
						  <dt><em></em>每日分配收益</dt>
					</dl><div class="jiaZai_more">点击查看更多</div>
css:
此处省略css。
 
js:
function nwalletProfit(num, cNum){
 $.ajax({
            type: "post",
            async: true,
            url: url,
            dataType: "json",
            success: function (data) {
                    if (data.list.length > 0){
                        var i = num;
                        var ci= 0;
                        var x = parseInt((data.profit_list.length)/10);//x为每10个一组的组数                        if(cNum >= x){
                            $(".jiaZai_more").hide(); //当点击更多的次数 ≥ 组数时,隐藏按钮
                        }
                        for(; i < data.profit_list.length; i++){
                            var htmltxt = "";
                            ci++; 
                            var date = data.profit_list[i].date;
                            var year = date.substring(0, 4);
                            var month = date.substring(4, 6);
                            var day = date.substring(6);
                            date = year+'年'+month+'月'+day+'日';
                            htmltxt += '<dd>';
                            htmltxt += '<h5 class="date">'+date+'</h5>';
                            htmltxt += '<p class="income">'+data.list[i].profit+'%</p>';
                            if(ci> 10){
                                break;
                            }
                            $("#incomeNum").append(htmltxt);
                        }

                    }
            },
            error: function (e, d, c) {
                console.log(d)
            }
        });
    }
    nwalletProfit(0);
    var clickNum = 0; //点击的次数
    $(".jiaZai_more").on('click', function(event) {
        event.preventDefault();
        clickNum++;
        var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
        nwalletProfit(iNum, clickNum);
    });

代码只供参考,此功能为作者原创,如有错误或者建议还望大神提出,共同进步!!