基于MUI修改的,下拉刷新 上拉加载

基于MUI自带的功能,进行了微调。
js和css直接引用MUI的即可。
下面直接贴上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">
</head>

<body>
    <!--下拉刷新容器-->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--数据列表-->
            <div class="mui-table-view mui-table-view-chevron">

            </div>
        </div>
    </div>
    <script src="js/mui.min.js"></script>
    <script>
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                down: {
                    callback: pulldownRefresh
                },
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }
        });
        /**
         * 下拉刷新具体业务实现
         */
        function pulldownRefresh() {
            setTimeout(function() {
                var table = document.body.querySelector('.mui-table-view');
                var cells = document.body.querySelectorAll('.mui-table-view-cell');
                location.reload();

// for (var i = cells.length, len = i + 10; i < len; i++) {
// var li = document.createElement('div');
//
// li.className = 'mui-table-view-cell';
// li.innerHTML = '<div>'+123123+'</div>'
//// var li = document.createElement('li');
//// li.className = 'mui-table-view-cell';
//// li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
// //下拉刷新,新纪录插到最前面;
// table.insertBefore(li, table.firstChild);
// }
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**

  • 上拉加载具体业务实现
    */
    function pullupRefresh() {
    setTimeout(function() {
    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
    var table = document.body.querySelector('.mui-table-view');
    var cells = document.body.querySelectorAll('.mui-table-view-cell');
    for (var i = cells.length, len = i + 10; i < len; i++) {
    var li = document.createElement('div');
    li.className = 'mui-table-view-cell';
    li.innerHTML = '<div>'+123123+'</div>'
                    table.appendChild(li);
                }
                var page = len/10;
                    alert(page)
            }, 1500);
        }

    // if (mui.os.plus) {
    // mui.plusReady(function() {
    // setTimeout(function() {
    // mui('#pullrefresh').pullRefresh().pullupLoading();
    // }, 10);
    //
    // });
    // } else {
    // mui.ready(function() {
    // mui('#pullrefresh').pullRefresh().pullupLoading();
    // });
    // }
    </script>
    </body>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复