dropload整合vue实现H5页面的下拉刷新分页

问题背景

由于我们公司做移动端用的是混合开发，适应ios和安卓，pc，微信等，但是分页这块一直没做好，做的不是太好(毕竟都是java程序员对前端这块不是很熟，硬是头皮上的你懂得)，但是分页就是用常规的web端的上下页按钮来实现的，很不符合移动端的操作，因此需要优化，自己动手写了一个下拉刷新的但是不好用，而且bug多，因此找了很长时间才发现了dropload这个框架，比较的容易上手，简单，但是文档写的不是很详细，许多要用的东西没介绍需要自己去看源码！做了好久才有点效果，经过不断地改进优化基本上没啥问题了。现在我就这次的问题做一个简单的前后代代码展示

前端

前端采用vue,分页用dropload

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

    $(function () {

        var re =null;
        // 页数
        var page = 1;
        // 每页展示5个
        var size = 5;
        var pageCount = 0;
        // dropload
        var dropload = $('#reg').dropload({
            // scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate: '<div class="dropload-update">↑释放更新</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            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>'
            },


            loadUpFn: function (me) {
                page++;
                $.ajax({
                    type: 'POST',
                    url: '/jtdj/service/meeting/MTRest?serviceName=PartyBuilding&methodName=queryPartyBulidingToApp&submission=DispatchAction&Existing=1',
                    dataType: 'json',
                    data: {
                        "loginName": loginName,
                        "roleCode": roleCode,
                        "currpage": page,
                    },
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",//x-www-form-urlencoded
                    beforeSend: function (XMLHttpRequest) {
                    },
                    success: function (result) {
                        if (page < pageCount){
                            re = result.party.rows;
                            console.log("data is => " +re);
                            for (var i = 0; i < re.length; i++) {
                                vm.list1.unshift(re[i]);
                            }

                            console.log("list1 is " + vm.list1);
                            // vm.list1 = result.party.rows;
                            vm.currpage = result.currpage.rows[0];
                            vm.count = result.count.rows[0];
                            dropload.resetload();
                        }else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        dropload.resetload();
                    }
                });
            },


            /*loadDownFn: function (me) {
                page++;
                $.ajax({
                    type: 'POST',
                    url: '/jtdj/service/meeting/MTRest?serviceName=PartyBuilding&methodName=queryPartyBulidingToApp&submission=DispatchAction&Existing=1',
                    dataType: 'json',
                    data: {
                        "loginName": loginName,
                        "roleCode": roleCode,
                        "currpage": 1,
                    },
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",//x-www-form-urlencoded
                    beforeSend: function (XMLHttpRequest) {
                    },
                    success: function (result) {
                        pageCount = result.count.rows[0];
                        data = result.party.rows;
                        vm.list1 = result.party.rows;
                        vm.currpage = result.currpage.rows[0];
                        vm.count = result.count.rows[0];
                        dropload.resetload();
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        dropload.resetload();
                    }
                });
            }*/
        });
    });
</script>

后台就不在这里罗嗦了，大家根据自己的写的来确定