Dropload.js 的使用

寫在前面的話：

　　當單頁呈現數據較多時，一般采用每上拉一次發送一次 ajax 請求

---

 

使用方法：

1.代碼：

<ul class="data-content">
    <li>內容<li>
    <li>內容</li>
</ul>

2.引用js:

<script src="./js/dropload.min.js"></script>

3.具體用法：

　　首先要自己造一個json文件，然后去請求里邊的數據。

<script>
    $(function() {
        var counter = 0;
        // 每頁展示10個
        var num = 10;
        var pageStart = 0,
            pageEnd = 0;

        // dropload
        $('.js-loadmore').dropload({
            scrollArea: window,
            loadDownFn: function(me) {
                $.ajax({
                    type: 'GET',
                    url: 'more.json',
                    dataType: 'json',
                    success: function(data) {
                        var result = '';
                        counter++;
                        pageEnd = num * counter;
                        pageStart = pageEnd - num;

                        for (var i = pageStart; i < pageEnd; i++) {
                            result += '<li>' +
                                '<div class="date-gap">' +
                                '<div class="date-l">' + data.lists[i].date + '</div>' +
                                '<div class="total-r">合計：<span class="js-amount">' + data.lists[i].total + '</span><span class="yuan">元</span></div>' +
                                '</div>' +
                                '</li>'
                            if ((i + 1) >= data.lists.length) {
                                // 鎖定
                                me.lock();
                                // 無數據
                                me.noData();
                                break;
                            }
                        }
                        // 為了測試，延遲1秒加載
                        setTimeout(function() {
                            $('.data-content').append(result);
                            // 每次數據加載完，必須重置
                            me.resetload();
                        }, 1000);

                    },
                    error: function(xhr, type) {
                        alert('Ajax error!');
                        // 即使加載出錯，也得重置
                        me.resetload();
                    }
                });
            }
        });
    });
</script>

注：result里面拼接的都是你要循環的那塊dom元素

以上~