MUI最簡潔的實現下拉刷新和上拉加載

時間 2019-11-19

標籤 mui 簡潔實現下拉刷新加載简体版

原文原文鏈接

本demo能夠再PC端瀏覽器的手機模式調試，也能夠再手機瀏覽器正常運行。javascript

文件準備css

mui的js、css、字體文件三樣
jquery文件一枚

文件結構：html

文件下載地址：java

連接: https://pan.baidu.com/s/1TTDaVOd-0UeAqLBUysW8pQ 提取碼: i82pjquery

html源代碼：ajax

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/mui.min.css" rel="stylesheet" />
    <script src="~/js/mui.min.js"></script>
    <script src="~/js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <!--下拉刷新容器-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--數據列表-->
            <ul id="testUl" class="mui-table-view mui-table-view-chevron">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
    var countDown = 0;//下拉次數
    var countUp = 0;//上拉次數
    mui.init({
        pullRefresh: {
            container: "#refreshContainer",//待刷新區域標識，querySelector能定位的css選擇器都可，好比：id、.class等
            down: {//下拉刷新
                height: 50,//可選,默認50.觸發下拉刷新拖動距離,
                auto: false,//可選,默認false.首次加載自動下拉刷新一次
                contentdown: "下拉能夠刷新",//可選，在下拉可刷新狀態時，下拉刷新控件上顯示的標題內容
                contentover: "釋放當即刷新",//可選，在釋放可刷新狀態時，下拉刷新控件上顯示的標題內容
                contentrefresh: "正在刷新...",//可選，正在刷新狀態時，下拉刷新控件上顯示的標題內容
                callback: async function () {//必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
                    if (countDown >= 3) {
                        mui.toast("沒有更多數據了");
                        //沒有數據
                        mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
                        return;
                    }
                    //模擬向服務器獲取數據的等待時間
                    await sleep(1000);
                    ///*每次加載動態的添加一個li*/
                    $("#testUl li:first").before($("<li>" + new Date() + "</li>"));
                    mui.toast("更新了一條數據");
                    ////沒有更多內容了，endPulldown 傳入true， 再也不執行下拉刷新
                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                    countDown++;
                }
            },
            up: {//上拉加載
                height: 50,//可選.默認50.觸發上拉加載拖動距離
                auto: false,//可選,默認false.自動上拉加載一次
                contentrefresh: "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
                contentnomore: '沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
                callback: async function () {//必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
                    if (countUp >= 3) {
                        this.endPullupToRefresh(true);//沒有數據
                        return;
                    }
                    await sleep(1000);
                    /*每次加載動態的添加一個li*/
                    $("#testUl").append($("<li>" + new Date() + "</li>"));
                    this.endPullupToRefresh(false)
                    countUp++;
                }
            }
        }
    });

    //模擬線程等待,ms:單位毫秒
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
</script>

相關標籤/搜索