mui下拉刷新和上拉加载

要实现下拉刷新和上拉加载的div格式

 <!-- 加载流填充数据  -->
               <div id="Data" class="mui-content mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view mui-table-view-chevron">
                           <li class="mui-table-view-cell mui-media" style="display:none;"></li>
                        </ul>
                   </div>
                </div>

mui方法实现：

var bignum = 2;              //初始最大页码
            var count = 1;              //初始页码
            var pulldown = false;       //初始下拉刷新状态
            var tpl1 = "#Data";    
            mui.init({
                pullRefresh: {
                    container: tpl1,
                    down: { //下拉刷新
                        auto: true, //可选,默认false.自动下拉刷新一次
                        contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                        contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                        contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                        callback: pulldownRefresh
                    },

                    up: { //上拉加载
                        auto: true, //可选,默认false.自动上拉加载一次
                        contentrefresh: '正在加载...',
                        contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback: pullupRefresh
                    }
                }
            });

            //下拉刷新执行方法
            function pulldownRefresh() {
                setTimeout(function() {
                    count = 1; //刷新并显示第一页
                    data = {                                //传入ajax的参数，这是测试文件，未启用
                        CurrentPage: count,                 //页码
                        PageLen: 10,                        //页码数据条数
                    };
                    mui(tpl1).pullRefresh().endPulldownToRefresh(pulldown); //参数为true代表没有更多数据了。
                    //type=1;//代表下拉刷新
                    $(tpl1+" ul").html("");         //下拉添加数据之前，清空一下ul容器的html
                    ajaxc(count);                   //下拉时添加的数据，我这里设置的是只显示第一页的数据
                    pulldown = true;                //页面执行一次后，按照数据已最新，如数据是实时更新，可以删除这一句
                }, 100);
            }
            //上拉加载执行方法
            function pullupRefresh() {
                setTimeout(function() {
                    //alert(count);
                    mui(tpl1).pullRefresh().endPullupToRefresh((count > bignum)); //参数为true代表没有更多数据了。
                    ajaxc(count);
                    count++;
                }, 100);
            };

ajaxc（）方法：

//添加数据方法
            function ajaxc(count){
                //这里面date，我写死了
                var date = "[{\"Id\":\"1\",\"title\":\"测试1\"},"+
                "{\"Id\":\"2\",\"title\":\"测试2\"},"+
                "{\"Id\":\"3\",\"title\":\"测试3\"},"+
                "{\"Id\":\"4\",\"title\":\"测试4\"},"+
                "{\"Id\":\"5\",\"title\":\"测试5\"},"+
                "{\"Id\":\"6\",\"title\":\"测试6\"},"+
                "{\"Id\":\"7\",\"title\":\"测试7\"},"+
                "{\"Id\":\"8\",\"title\":\"测试8\"},"+
                "{\"Id\":\"9\",\"title\":\"测试9\"},"+
                "{\"Id\":\"10\",\"title\":\"测试10\"}]";
    date = JSON.parse(date);
                    var li = "";
                        for(var i = 0; i < date.length; i++) {
                            li += $("#agric").html();
                            li = li.replace("${1}", date[i].title);
                            //alert(date.Data[i].Id);
                        }
                        //console.log($("#AgricData ul").html());
                        //bignum = date.TotalPage;
                        $(tpl1+" ul").html($(tpl1+" ul").html()+li);
            }

如果需要原版html可以访问http://pan.baidu.com/s/1pLo7d4v下载