H5使用mui的下拉刷新和上拉加载！

作者:燕歆波
导读:在使用mui的下拉刷新和上拉加载时,碰到了一些问题,解决之后发现这是一个很简单的问题,可是还是想把它记下来!

简介

使用HBuilder创建一个手机App项目,创建一个含有mui下拉刷新和上拉加载的html页面,这样的话,一些基本的架子,就不用自己手动搭建了;
创建之后会产生两个页面,一个主页面,一个子页面,子页面就是主要实现下拉刷新和上拉加载的页面;在子页面中,有这样一个初始化的操作:
mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        callback: pulldownRefresh
                    },
                    up: {
                        height: '60px',
                        contentrefresh: '正在加载...',
                        contentnomore: '没有更多数据了',
                        callback: pullupRefresh
                    }
                }
            });

其中down代表下拉,up代表上拉,他们各自对应一个方法,在上拉中,可以配置上拉时加载中的提示文本,也可以配置加载完毕时显示的内容;callback的值就是刷新和加载的方法.
然后分别实现这两个方法：

            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                pageNo = 0;
                console.log("刷新");
                setTimeout(function() {
                    isRefresh = true;
                    awardRequest.getData(userId);
                }, 1500);
            }
            /**
             * 上拉加载具体业务实现
             */
            function pullupRefresh() {
                console.log("加载");
                $("#bottom_nav").toggle(10);
                setTimeout(function() {
                    isRefresh = false;
                    awardRequest.getData(userId);
                }, 1500);
            }

在上拉加载最原始的实现demo中有着这样一句话:

mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2);

当count的值大于2时就不在加载下一页;

好了,回到要说的问题上,这里想要说的是:如果你没有配置这句话,那么在上啦加载的时候,只会加载到第二页；所以，在请求网络成功后,根据总条数来判断count的值，根据这个值来判断是否加载完毕；

var awardRequest = new Vue({
                el: '#app',
                data: {
                    goodsList: ''
                },
                methods: {
                    getData: function(id) {
                        var _self = this;
                        if(isRefresh){
                            pageNo = 1;
                        }else{
                            pageNo = pageNo +1;
                        }
                        var _url = ....;
                        $.ajax({
                            type: 'get',
                            url: _url,
                            success: function(data) {
                                if(data.code == 10000) {
                                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > (Math.ceil(data.data.total/10))));
                                    if(isRefresh) {
                                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                                        _self.goodsList = data.data.sends;
                                    } else {
                                        if(data.data.sends == null || data.data.sends.length <= 0) {
                                            pageNo=pageNo-1;
                                            mui.toast("没有更多了!");
                                            console.log("page"+pageNo);
                                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                            $("#bottom_nav").toggle(500);
                                            return;
                                        }

                                        if(_self.goodsList == null || _self.goodsList == '' || _self.goodsList.length <= 0) {
                                            _self.goodsList = newData;
                                        } else {
                                            var newData = new Array();
                                            newData = data.data.sends;
                                            console.log("新的" + newData.length+"page"+pageNo);
                                            for(var i = 0; i < newData.length; i++) {
                                                var obj = newData[i];
                                                _self.goodsList.push(obj);
                                            }
                                        }
                                    }

                                }
                            },
                            error: function(error) {
                                mui.alert("网络出错啦", "警告", "确定");
                            }
                        });
                    }
                }
            });

这样就解决了,为什么上拉加载只加载到第二页的问题!