WEB开发者之混合开发APP（六）， 下拉刷新

下拉刷新，本文只介绍下拉刷新重置页面的情况。同上一篇博文一样，笔者介绍两种形式的下拉刷新方法。

1. mui下拉刷新

1.1 相对固定的页面结构

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul class="mui-table-view mui-table-view-chevron" id="olist">
        </ul>
    </div>
</div>

1.2 初始化

mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                style:'circle',
                color:'#333333',
                callback: pulldownRefresh
            }
        }
    });
var pageNum = 1; //从第一页开始

1.3 下拉触发的函数

    function pulldownRefresh(){ 
        //重置数据
        var totalPage = 1;
        pageNum = 1;        
        var data = {
            "pageNum":pageNum
        };
        mui.post(orderListURL,data,function(data){
            if(data.success){           
                $.each(data.list,function(i,v){
                    var each =  '<li class="mui-table-view-cell lis">xxxx</li>';
                    $("#olist").append(each);
                });
                pageNum++;  //增页
            }
        },'json');
        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //结束下拉刷新 
    }

2. mescroll下拉刷新

mescroll是一套精致的上拉js框架，集成到混合app开发中也是不错的。

2.1 相对固定的页面结构

<link rel="stylesheet" type="text/css" href="dist/mescroll.css"/>
<script src="dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<div class="mescroll chhe3"  id="mescroll">
    <ul class="data-list" id="linelist">
    </ul>
</div>

2.2 初始化

var mescroll = null;
$(function(){
    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置
    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
    //所以，只用配置上拉加载即可
    mescroll = new MeScroll("mescroll", {
    up: {
        callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
        isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
        clearEmptyId: "linelist", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
        toTop:{ //配置回到顶部按钮
            src : "res/img/mescroll-totop.png" //默认滚动到1000px显示,可配置offset修改
        }
    }
    });
});

懂Html就能开发App，博文持续更新，博主QQ:260737830！