MUI上拉加载下拉刷新 

<!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">
        <style type="text/css">
            .mui-content>.mui-table-view:first-child {
                margin-top: -1px;
            }
        </style>
    </head>

    <body>
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <ul class="mui-table-view mui-table-view-chevron"></ul>
            </div>
        </div>
        <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script>
            
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        style:'circle',
                        callback: pulldownRefresh
                    },
                    up: {
                        auto:true,
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
            
            var count = 0;
            function pullupRefresh() {
                setTimeout(function() {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 5)); //参数为true代表没有更多数据了。
                    $(".mui-table-view").append( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );
                }, 1500);
            }

            function addData() {
                count++;
                $(".mui-table-view").prepend( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );
            }
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                setTimeout(function() {
                    addData();
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                    mui.toast("为你推荐了5篇文章");
                }, 1500);
            }

        </script>
    </body>

</html>

 

posted @ 2019-01-05 15:42  波罗斯の程序日记  阅读(547)  评论(0)    收藏  举报