Use mui.js to implement pull-down refresh

Gossip:

Recently, due to the needs of the company's projects, Xiaoying needs to write some html5 pages, which is convenient for the company's IOS and Android to be nested in the APP. Among them, it is necessary to implement the pull-down refresh function. In fact, it is a call to mui.js, which is followed by Xiaoying will come together to see how it is implemented.

table of Contents:

Effect chart:

Mui.min.js, mui.min.css and jquery-3.3.1.js Xiaoying will not paste it. Everyone can download it from Baidu on the Internet. Xiaoying will put the default.css and index.html files. Paste it out.

default.css

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html,
body,
.view-container {
    height: 100%;
    font-family: PingFangSC-Medium;
}

.bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.bg .loading {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid #BEBEBE;
    border-left: 5px solid #498aca;
    animation: load 1s linear infinite;
    -moz-animation: load 1s linear infinite;
    -webkit-animation: load 1s linear infinite;
    -o-animation: load 1s linear infinite;
}

@-webkit-keyframes load {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes load {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes load {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

.top-title {
    background: url(../images/2.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 350px;
}

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="./css/mui.min.css">
    <link rel="stylesheet" href="./css/default.css">
</head>

<body>
<!--Pulldown refresh container-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <div class="top-title"></div>
        <!--Datasheets-->
        <ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul>
    </div>
</div>
<div class="bg">
    <div class="loading"></div>
</div>
<script src="./js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    /// / Progress display
    $('.bg').css('display', 'flex');

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                style: 'circle',
                callback: pulldownRefresh
            },
            // up: {
            //     auto:true,
            //Contentrefresh: 'Loading...',
            //     callback: pullupRefresh
            // }
        }
    });

    var count = 0;

    function pullupRefresh() {
        setTimeout(function () {
            getDt('default');
        }, 1500);
    }

    pullupRefresh();

    function addData() {
        getDt('down');
    }

    /**
     * Pull down to refresh specific business implementation*/
    function pulldownRefresh() {
        setTimeout(function () {
            if (count < 3) {
                addData();
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                mui.toast("Recommended 5 articles for you");
            } else {
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                mui.toast("No more data");
            }
        }, 1500);
    }

    function getDt(ways) {
        count++;
        var table = document.body.querySelector('.mui-table-view');
        var cells = document.body.querySelectorAll('.mui-table-view-cell');
        var len;
        if (ways == 'default') {
            var newCount = cells.length > 0 ? 5 : 10;//Load 10 for the first time, full screen
            for (var i = cells.length, len = i + newCount; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>';
                table.appendChild(li);
            }
        }
        if (ways == 'down') {
            for (var i = cells.length, len = i + 5; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>';
                //Pull down and refresh, the new record is inserted to the front;
                table.insertBefore(li, table.firstChild);
            }
        }
        //Progress hiding
        $('.bg').css('display', 'none');
    }

    mui('body').on('tap', 'a', function () {
        window.top.location.href = this.href;
    });
    $('a').ontouchstart = function (e) {
        e.preventDefault();
    };
</script>
</body>

</html>