1. 程式人生 > >使用mui.js實現下拉刷新

使用mui.js實現下拉刷新

near lex padding type key border animation mil 正在

閑聊:

最近因公司項目需求,小穎需要寫一些html5頁面,方便公司IOS和Android給APP中嵌套使用,其中需要實現拉下刷新功能,其實就是調用了一下mui.js就可以啦嘻嘻,下面跟著小穎一起來看看具體是怎麽實現的吧.

目錄:

技術分享圖片

效果圖:

技術分享圖片

mui.min.js、mui.min.css和jquery-3.3.1.js 小穎就不粘貼啦,大家在網上百度下載下來就可以啦嘻嘻,小穎就把default.css和index.html文件粘貼出來哦。

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>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <div class="top-title"></div>
        <!--數據列表-->
        <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>
    // //進度顯示
    $(.bg).css(display, flex);

    mui.init({
        pullRefresh: {
            container: #pullrefresh,
            down: {
                style: circle,
                callback: pulldownRefresh
            },
            // up: {
            //     auto:true,
            //     contentrefresh: ‘正在加載...‘,
            //     callback: pullupRefresh
            // }
        }
    });

    var count = 0;

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

    pullupRefresh();

    function addData() {
        getDt(down);
    }

    /**
     * 下拉刷新具體業務實現
     */
    function pulldownRefresh() {
        setTimeout(function () {
            if (count < 3) {
                addData();
                mui(#pullrefresh).pullRefresh().endPulldownToRefresh();
                mui.toast("為你推薦了5篇文章");
            } else {
                mui(#pullrefresh).pullRefresh().endPulldownToRefresh();
                mui.toast("沒有更多數據了");
            }
        }, 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;//首次加載10條,滿屏
            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>;
                //下拉刷新,新紀錄插到最前面;
                table.insertBefore(li, table.firstChild);
            }
        }
        //進度隱藏
        $(.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>

使用mui.js實現下拉刷新