dropload.js实现按标签分类显示页面并下拉加载

有需求是按照类别标签，进行分类显示，并且下拉加载，使用的是dropload.js插件，实现效果如下

 （在页面分别点击标签按钮，实现下边内容的更新，并且，下方内容页面要有下拉加载效果）

实现方式：

一：思路：将dropload的下拉加载放入点击标签事件函数内，并且每次点击函数内一开始都初始化页码page、清除原页面内容；为了解决初始进来不加载问题，可将标签点击事件函数放入自动加载函数中

二：代码：

（页面内容）

( 页面进来自动触发)

function allComment(column_id) {
            var iColumnId = column_id;
            $("#comment_list").empty();
            $('#morelist').empty();
            var iPage = 1;
            dropload = $('.myComment-list').dropload({
                scrollArea: window,
                domDown: {
                    domClass: 'dropload-down',
                    domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                    domNoData: '<div class="dropload-noData">暂无数据</div>'
                },
                loadDownFn: function (me) {
                    $.ajax({
                        type: 'GET',
                        url: "{{ route('front.personal.comment') }}?iPage=" + iPage + '&iColumnId=' + iColumnId,
                        dataType: 'json',
                        success: function (res) {
                            if (res.data.data_flag) {
                                $('#morelist').append(res.data.sHtml);
                            } else {
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                            console.log(iPage);
                            iPage++;
                            // 每次数据加载完，必须重置
                            dropload.resetload();
                        },
                        error: function (xhr, type) {
                            alert('loadDownFn error!');
                            // 即使加载出错，也得重置
                            dropload.resetload();
                        }
                    });
                }
            });
        }

 

理解：

（1）每次点击标签，都会初始化一次（代码3,4,5行），然后执行dropload的下拉加载行为，ajax中，将页码和标签id传到控制器，进行数据搜索，搜索完毕给到小页面，将小页面html返回此处，

（2）20行，res.data.data_flag是一个布尔值，是控制器的判断某页数据是否还有的一个判断；

（3）每次传值page=1,成功后，将page++,即为第二页

（4）页面加载内容div,要放到dropload的引用div上边,要不“暂无数据”这种提示会显示在页面头部