//首先在此之前我们先要引用jquery的插件，以及mui.js插件

<!--html代码-->
<!--需要加载的容器-->
 <div class="shop-list font-16 col-1 mui-scroll-wrapper mui-content" id="refreshContainer">
<!--mui-scroll是否允许滑动-->
<div class="mui-scroll">
<!--重点mui-table-view mui-table-view-chevron这里是页面加载那些的文字样式-->
<ul class="mui-table-view mui-table-view-chevron" id="list">

</ul>
</div>
</div>


<!--MUIWEBvIEW分页-->
<script type="text/javascript">
$(function () {
 //需要显示的条数
var size = 3;
 //页码
var page = 1;
//下拉刷新监听事件（这里可以直接去mui文档中复制）
mui.init({
pullRefresh: {
container: '#refreshContainer',
                    down: {
                        height: 50,//可选,默认50.触发下拉刷新拖动距离,
                        auto:false,//可选,默认false.自动上拉加载一次
                        callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                          //5毫秒显示
                            window.setTimeout(function () {
                              //向下刷新重新赋值 
                               page = 1;
                                size = 3;
                               //调用获取数据的方法
                                DtGetData(size, page);
                            }, 500);
                        }
                    }, //END 下拉刷新
                    up: {
                        height: 50,//可选,默认50.触发下拉刷新拖动距离,
                        auto:true,
                        contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                        contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                            window.setTimeout(function () {
                                DtGetData(size, page);
                                $(".mui-spinner").hide();
                            }, 500); //END 上拉加载
                        }
                    }
                }
            });

            //获取对应的数据
function DtGetData(a, b) {
//mui展示数据的方法
mui.ajax("api接口", {
                    data: { 'size': a, 'page': b },
                    dataType: 'json',
                    type: 'post',
                    headers: { 'Content-Type': 'application/json' },
                    success: function (data) {
                        $("#list").html("");
//开启数据加载
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                       //获取json格式的数据 
                       var returnData = data.List;
                       //html dom属性
                        var element = document.getElementById("list");
                        //html标签遍历
                        for (var i = 0; i < returnData.length; i++) {
                           
                            $("#list").append("这里是绑定你在后台调取出来的数据");
                        }
                        //分页
                        var PageSize;
                        //获取总页数
                        if ((data.Total % size) > 0) {
                            PageSize = (data.Total / size) + 1;
                        }
                        else {
                            //能整除
                            PageSize = (data.Total / size);
                        }
                        if (PageSize < page) {
                            //当前显示数量大于总数时，停止上拉下拉结束转雪花进度条的“正在加载...”过程
                            //mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                            //停止下拉刷新（禁用上拉加载）
                            mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
                            mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
                            mui.toast("没有更多的数据")
                        }
                        else {
                            page++;
                            if (PageSize <page) {
                               //停止加载和提示
                                mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                                mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
                                mui.toast("暂无更多数据");
                            }
                            else {
                                //有重新触发上拉加载的需求
                                mui('#refreshContainer').pullRefresh().refresh(true);
                            }
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                        //异常处理；
                        console.log(type);
                    }
                })
            }
            
            //在方法为进行事件监听，在方法里面会叠加多次执行
            //监听tap时间解决页面href超链接不跳转的问题 
            mui('body').on('tap', 'a', function ()
            { document.location.href = this.href; });
            //解决mui屏蔽点击事件的bug,通过添加对应控件的点击事件
            mui("#refreshContainer").on('tap', '.kedianji', function 
           (event) {
                this.click();
            });
        })
    </script>