轻笑苍穹

导航

mui框架上下拉加载

mui框架被定位为“最接近原生体验的移动App的UI框架”。

写下mui框架中常用的两个功能，下拉刷新和上拉加载，没有后台交互，用js写假数据模拟，下面直接上代码。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉和上拉加载demo</title>
    <link rel="stylesheet" type="text/css" href="mui/css/mui.css">
</head>
<body>
    <script type="text/javascript" src="mui/js/mui.js"></script>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">下拉和上拉加载更多</h1>
    </header>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view mui-table-view-chevron">
                //加载刷新的li
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        mui.init({
            pullRefresh:{
                container:'#pullrefresh',
            down:{
                callback:pulldownRefresh
            },
            up:{
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
           }
        });

        // 下拉刷新callback
        function pulldownRefresh(){
            setTimeout(function(){
                var table = document.body.querySelector('.mui-table-view');
                var cells = document.body.querySelectorAll('.mui-table-view-cell')
                for(var i = cells.length,len = i + 3;i<len;i++){//下拉刷新三个li。
                    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();
            },1500);
        }

         //上拉加载callback
        var times = 0; 
        function pullupRefresh() {
                setTimeout(function(){
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++times > 2)); //参数为true代表没有更多数据了,则执行endPullupToRefresh（）方法结束上拉加载。
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    for (var i = cells.length, len = i + 20; i < len; i++) {//上拉加载20个li
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<a class="mui-navigate-right">Item' + (i + 1) + '</a>';
                        table.appendChild(li);
                    }
                },1500);
            }
            if (mui.os.plus) {
                mui.plusReady(function(){
                    setTimeout(function(){
                        mui('#pullrefresh').pullRefresh().pullupLoading();
                    },1000);
                });
            } else {
                mui.ready(function(){
                    mui('#pullrefresh').pullRefresh().pullupLoading();
                });
            }

    </script>
</body>
</html>

 上个效果图：

 

posted on 2017-11-14 18:28  轻笑苍穹  阅读(666)  评论(0)  编辑  收藏  举报