1. 程式人生 > >mui上拉載入下拉重新整理問題

mui上拉載入下拉重新整理問題

mui是h5十大框架之一。很好用,但是針對不同的場景,文件的描述不夠我們理解。

場景:通過mui的上拉載入更多資料,下拉重新整理回剛剛進入當前頁面的狀態。筆者設定每次上拉就清空舊頁面的內容,把新載入的10條資料渲染到頁面上,當下拉時候,恢復到第一次載入的狀態。

問題:當上拉載入的資料達到最多時候,通過

mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)

設定不讓繼續上拉載入。然後當下拉重新整理想要回覆上拉載入,採用如下:

mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

測試發現,沒辦法恢復上拉載入的功能。

筆者也嘗試了用:

mui('#pullup-container').pullRefresh().refresh(true);
mui('#pullup-container').pullRefresh().disablePullupToRefresh();
mui('#pullup-container').pullRefresh().enablePullupToRefresh();

來做測試。但是隻有當使用禁用和啟動互動時候可以恢復,但是當重新整理的時候,會自動執行一次上拉載入動作。所以這些方案都被筆者廢棄了。針對上面這些,筆者又嘗試如何不讓mui再執行重新整理動作時候不自動執行一次上拉載入動作,經過研究發現如下呼叫啟用上拉功能的程式碼,就不會自動執行一次上拉載入的動作:

setTimeout("enablepull",1000);//延時至少1s,小於1s就不行。

function enablepull(){

mui('#pullup-container').pullRefresh().enablePullupToRefresh();

}

上面雖然可以解決,但是筆者還是覺得不好,又嘗試了一種曲線救國的方式:

設定全域性變數enablepull

每次獲取結果之後都判斷是否還有更多資料,如果沒有更多,那麼enablepull=false;

這樣每次上拉之前做如下判斷:

    if (!enablePullUp) {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
        mui.toast("沒有更多資料了");
        return;
    }

成功解決問題。

附上筆者關於曲線解決問題的程式碼:

//作者是模擬實現分頁的效果,只是只做了下一頁(上拉載入),和回到第一頁的效果(下拉重新整理)
var pageNo = 1;
var pageSize = 6;
var enablePullUp = true;
$(document).ready(function(){
    mui('body').on('tap','a',function(){document.location.href=this.href;});
    //上拉載入下拉重新整理初始化
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                style:'circle',//必選,下拉重新整理樣式,目前支援原生5+ ‘circle’ 樣式
                color:'#2BD009', //可選,預設“#2BD009” 下拉重新整理控制元件顏色
                callback: billRefresh
            },
            up: {
                auto:false,
                contentrefresh: '正在載入...',
                contentnomore:'',
                callback: billLoad
            }
        },
        swipeBack:true, //啟用右滑關閉功能
        beforeback: function(){
            //返回true,繼續頁面關閉邏輯
            return true;
        }
    });
});

/**
 * 上拉載入具體業務實現
 */
function billLoad() {
    if (!enablePullUp) {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
        mui.toast("沒有更多資料了");
        return;
    }
    pageNo++;
    getBill();
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
}

/**
 * 下拉重新整理具體業務實現
 */
function billRefresh() {
    pageNo = 1;
    getBill();
    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
}
function getBill() {
    $.ajax({
        url: 'url',
        data: {
            "pageNo": pageNo,
            "pageSize": pageSize,
            "other": other
        },
        success: function (result) {
            var items = result.rows;
          	//渲染程式碼省略
          	、、、、、
          	//渲染程式碼省略
          
            enablePullUp = items.length >= pageSize;
        },
        error: function (result) {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //引數為true代表沒有更多資料了。
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            enablePullUp = false;
        }
    });
}