使用mui进行上拉加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_38924695/article/details/84065556

前台JSP代码：

<link rel="stylesheet" href="${ctx}/thisapp/css/mui.min.css" />
<script src="${ctx}/thisapp/js/mui.min.js"></script>
<script type="text/javascript">
        var isture =false;  //总共页数
        var currPage=1; //当前页码
        var pagesize=10; //计数器

        function getList(){
            $.ajax({
                url:'/tpf/skel/pageAffairs?pagesize=' + pagesize + "&currentpage=" + currPage,
                type:'post',
                dataType:"json",
                timeout:1000,
                success:function(res){
                    console.log(res.list)
                    if (res.list[0] != null ){
                        $.each(res.list,function(i,value){
                             $("#refreshul").append("<li><i></i><a href='/tpf/currentaffairs/lookInfo?id="+res.list[i].id+"'>"+res.list[i].title+"</li>");
                        });
                        currPage++;
                    }else {
                        isture = true;
                    }
                }
            })
        }

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

        function pullupRefresh(){
            setTimeout(function(){
                mui('#pull').pullRefresh().endPullupToRefresh(isture);
                getList();
            },1000)
        }
</script>

<div  id="pull" class="content mui-content" style="height: 500px;">
        <div class="mui-scroll">
            <div id="refreshul" class="mui-table-view mui-table-view-chevron">
            </div>
        </div>
    </div>

后台java代码：

public static void pageAffairs(Integer pagesize,Integer currentpage){
        StringBuilder hql = new StringBuilder(" from CurrentAffairs where isShow = 1 order by createTime desc ");
        List<CurrentAffairs> currentAffairs = CurrentAffairs.find(hql.toString()).fetch(currentpage, pagesize);
        Long count = CountrysideTour.count(hql.toString());
        renderJSON(ConvertUtil.convertMap(count, currentpage, currentAffairs));
    }