mui下拉加载

初始化方法类似下拉刷新，通过mui.init方法中pullRefresh参数配置上拉加载各项参数，如下：

mui.init({
  pullRefresh : {
    container:refreshContainer,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
    up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:true,//可选,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    }
  }
});

    <div id="pullrefreshs" class="mui-content mui-scroll-wrapper">
                <div>
                    <ul class="list-group" id="list-group">
                        <?php foreach($data as $v):?>
                            <li class="list-group-item">
                                <h4>
                                    <?php echo $v[ 'type'];?>
                                        <span class="span_list" <?php if($v[ 'is_add']==1 ){echo
                                        'style="color:green"';}?>
                                            >+
                                            <?php echo $v[price];?>
                                        </span>
                                </h4>
                                <?php echo date( 'Y-m-d H:i:s',$v[ 'addtime']);?>
                            </li>
                            <?php endforeach;?>
                    </ul>
            </div>
        </div>

特别这样div 我调试时就是这里有坑

<script>
    mui.init({
        //swipeBack:true //启用右滑关闭功能
    });
    var item = document.getElementById('pullrefreshs');
    item.addEventListener("swiperight",
    function() {
        console.log("你正在向左滑动");
        window.history.go( - 1);
    });

    var i = 1; //计数器
    mui.init({
        pullRefresh: {
            container: '#pullrefreshs',
            //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up: {
                height: 500,
                //可选.默认50.触发上拉加载拖动距离
                contentrefresh: "正在加载...",
                //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了',
                //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            },
        }
    });

    function data() {
        $.post('?m=Index&c=user&a=detail_account', { page: i },  function(re) {
            i++;
            if (re.error == 0) {
                mui("#pullrefreshs").pullRefresh().endPullupToRefresh(false);
                var str = '';
                $.each(re.msg, function(index, data) {
                  str = str+" <li class='list-group-item'><h4> "+data.type+"<span class='span_list"+data.is_add+"'>"+data.price+"</span></h4>"+getLocalTime(data.addtime)+"</li>";                       
                                        
                });
                $("#list-group").append(str);
            } else if (re.error == 1) {
                mui("#pullrefreshs").pullRefresh().endPullupToRefresh(true);
            }
        },
        'json')

    }

    function getLocalTime(nS) {     
       return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
    } 
    function pullfresh() {
        setTimeout(function() {
            data();
        },
        1000);
        mui.init();
    }
</script>

要引入css js 文件

<script src="html/js/mui.min.js"></script>

<link rel="stylesheet" href="html/css/mui.min.css">