工作需要,使用ajax在原来的列表下边使用ajax请求后台数据,拼接在列表最下边,在github转了好久,发现了一个bug极多的js刷新插件,尝试了一个下午,就在快放弃的时候,发现下边有留言说用mescroll框架比较简单好用。遂研究许久,做Javaweb嘛,难免碰前端……

mescroll.js快速上手:

前往mescroll官网下载js和css :http://www.mescroll.com/load.html

1. 下载并引用 mescroll.min.css , mescroll.min.js

2. 拷贝以下布局结构 :

<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
    //列表内容,如:<ul>列表数据</ul> ...
</div>

3.创建mescroll对象 :

复制代码
var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
                   //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
                   //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
                down: {
                    callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
                },
                up: {
                    callback: upCallback //上拉加载的回调
                }
});
复制代码

4. 处理回调 :

复制代码
     //下拉刷新的回调
        function downCallback() {
            $.ajax({
                url: \'xxxxxx\',
                success: function(data) {
                    //联网成功的回调,隐藏下拉刷新的状态;
                    mescroll.endSuccess(); //无参
                    //设置数据
                    //setXxxx(data);//自行实现 TODO
                },
                error: function(data) {
                    //联网失败的回调,隐藏下拉刷新的状态
                    mescroll.endErr();
                }
            });
        }
        
        //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
        function upCallback(page) {
            $.ajax({
                url: \'xxxxxx?num=\' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?
                success: function(curPageData) {
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
                    //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)
                    
                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    //必传参数(当前页的数据个数, 总页数)
                    //mescroll.endByPage(curPageData.length, totalPage);
                            
                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //必传参数(当前页的数据个数, 总数据量)
                    //mescroll.endBySize(curPageData.length, totalSize);
                            
                    //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                    //必传参数(当前页的数据个数, 是否有下一页true/false)
                    //mescroll.endSuccess(curPageData.length, hasNext);
                            
                    //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                    //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                    //如果传了hasNext,则翻到第二页即可显示无更多数据.
                    //mescroll.endSuccess(curPageData.length);
                    
                    //设置列表数据
                    //setListData(curPageData);//自行实现 TODO
                },
                error: function(e) {
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                    mescroll.endErr();
                }
            });
        }
复制代码

 

================分割线:以上均来自mescroll官网,也是最基本的==============

下边开始写一些在使用这个框架时候用到的方法:

mescroll.endSuccess(date.length,false); //这个方法这样用可以使上拉加载的圈的层隐藏起来,常用于ajax判断返回的参数是否为空,为空则关闭加载层
复制代码
<style type="text/css">
  .mescroll{
                position: fixed;
                top: 44px;
                bottom: 37px;
                height: auto;
            }
  </style>
在head中加入这个来自适应整个要滚动的层的高度,其中top的值可以修改成自己标题栏的高度,这样就不会出现标题栏下出现一大块空白
复制代码
mescroll.resetUpScroll(); //这个方法用于下拉刷新重置了因下拉动作而到底的底部显示,也因此会多回调一次上拉加载(此方法内部调用),每次下拉刷新回调的地方都有重置一次
htmlLoading: \'<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip"></p>\', //上拉加载中的布局,p标签随意定义,前边的是个会转的圈,这两行在up中
htmlNodata: \'<p class="upwarp-nodata"></p>\', //无数据的布局,其中p标签中可以写自己想要的文字
noMoreSize: 5, //这个是当页面显示不足这个数字的时候不显示到底定义的文字,比如不满足5条,则不显示最下方的“--end--”

版权声明:本文为yiyi17原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/yiyi17/p/9327768.html