作者:燕歆波
導讀:在使用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("網路出錯啦", "警告", "確定");
                            }
                        });
                    }
                }
            });

這樣就解決了,為什麼上拉載入只加載到第二頁的問題!