mui上拉載入更多的使用

冰淚戀心發表於2019-02-16
UI

demo地址

我的另一部落格原文連結
gitHub地址

mui框架中上拉載入的坑

1、在函式自己上拉載入行為後的回撥函式
2、在mui封裝的上拉載入中，點選某一項會失效。

解決方法

1、該函式是必須要寫的，用來寫自己的邏輯需求，但是一般情況下，需要設定顯示為“載入更多”還是“沒有更多資料了”。看了一些部落格和官方文件，基本上都把這個設定放在了定時器中並在定時器中呼叫獲取資料的方法（自己的業務需求）。
2、在mui封裝的上拉載入中，點選某一項會失效。這個是真的很坑。就是採用事件監聽的方式，阻止預設行為

示例程式碼

mui(`選擇器`).on(`tap`,`選擇器`,function(e){
     e.preventDefault();
    //自己的業務邏輯
})

一開始我將上述程式碼放在了mui.plusready()函式裡面，可是事件並沒有觸發，所以，當我將它mui.plusready()中拿出來，事件就起作用了，我並不知道這是為什麼，如果你偶爾看到這篇文章，可以告訴我一下。

demo程式碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <script>
        window.onload = function () {
            /*750代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫100是
             為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
            getRem(750, 100)
        };
        window.onresize = function () {
            getRem(750, 100)
        };
        function getRem(pwidth, prem) {
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth / pwidth * prem + "px";
        }
    </script>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/reset.css"/>
    <title>關於mui的上拉載入</title>
    <style>
        .mui-content {
            background: #fff;
        }

        h2 {
            font-size: 0.28rem;
            line-height: .6rem;
            padding-left: 10px;
        }

        .mui-scroll-wrapper {
            top: .75rem;
        }
    </style>
</head>
<body>
<div class="mui-content">
    <h2>上拉載入</h2>

    <div class="mui-scroll-wrapper" id="pullRefresh">
        <div class="mui-scroll">
            <ul class="mui-table-view" id="listContainer">
                <li class="mui-table-view-cell">
                    list1
                </li>
                <li class="mui-table-view-cell">
                    list2
                </li>
                <li class="mui-table-view-cell">
                    list3
                </li>
                <li class="mui-table-view-cell">
                    list4
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/mui.min.js"></script>

<script>
    (function ($, doc) {
        var listContainer = doc.getElementById(`listContainer`);
        mui.init({
            pullRefresh: {
                container: `#pullRefresh`,//待重新整理區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
                up: {
                    height: 50,//可選.預設50.觸發上拉載入拖動距離
                    auto: true,//可選,預設false.自動上拉載入一次
                    contentrefresh: "正在載入...",//可選，正在載入狀態時，上拉載入控制元件上顯示的標題內容
                    contentnomore: `沒有更多資料了`,//可選，請求完畢若沒有更多資料時顯示的提醒內容；
                    callback: pullfreshFunc //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料；
                }
            }
        });
        var flag = true, counter = 1, pageSize = 10;

        function pullfreshFunc() {
            setTimeout(function () {
                mui(`#pullRefresh`).pullRefresh().endPullupToRefresh(flag);//引數為true代表沒有更多資料了。
                getData();
            }, 500);

        }

        function getData() {
            mui.ajax({
                type: `get`,
                url: `../json/data.json`,
                data: {`counter`: counter},
                success: function (response) {
                    console.log(response);
                    let list = response.peopleList;

                    let html = "";
                    flag = !(list[0] == null || list[0] == "" || !list[0]);

                    if (flag) {
                        counter++;
                    }
                    for (let i = 0; i < list.length; i++) {
                        html += `<li class="mui-table-view-cell">` + list[i].name + `</li>`;
                    }
                    jQuery(`#listContainer`).append(html)

                },
                error: function (error) {
                    console.log(error)
                }
            })
        }

        //點選單項事件
//        mui中上拉載入中的坑1：點選事件失效(不需要放在mui.plusReady（）中)
        mui(`#pullRefresh`).on(`tap`, `li.mui-table-view-cell`, function (e) {
            e.preventDefault();
            console.log(`觸發點選事件了`)
        })
    }(mui, document))
</script>
</body>
</html>

相關文章