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元素

以上~

 

转载于:https://www.cnblogs.com/Christeen/p/6874462.html